响应矩形与图像适合最大的尺寸，同时保持长宽比

I'm trying to create a responsive rectangle that has:

我试着创建一个响应式矩形

1. height that is 62% of width
2. 高度是宽度的62%
3. background: linear-gradient
4. 背景:线性渐变
5. inside the rectangle is an image centered vertically and horizontally with a maximum size, all images have the same width: 400px but a different height
6. 在矩形内部是一个垂直和水平居中的图像，最大尺寸，所有的图像都有相同的宽度:400px，但是高度不同

What I have done before:

我之前所做的:

1. for getting responsive rectangle I used this approach:
2. 为了得到响应矩形，我使用了以下方法:

.responsive-rectangle {
  width: 100%;
  max-width: 450px;
  background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
}
.responsive-rectangle:before {
  content: "";
  display: block;
  padding-top: 62%;
}

<div class="responsive-rectangle"></div>

jsfiddle

jsfiddle

2. to align the image inside rectangle I have used display: flex; and text-align:center; with an .img-wrapper:
3. 为了将图像对齐到矩形内，我使用了display: flex;和text-align:中心;与一个.img-wrapper:

.responsive-rectangle {
  width: 100%;
  max-width: 450px;
  background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
  display: flex;
  text-align: center;
}
.responsive-rectangle:before {
  content: "";
  display: block;
  padding-top: 62%;
}
.image-wrapper {
  margin: auto;
}
img {
  width: 100%;
  height: 100%;
}

<div class="responsive-rectangle">
  <div class="image-wrapper">
    <img src="https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png" alt="">
  </div>
</div>

jsfiddle

jsfiddle

This works perfect in case with image 400px x 220px, but with images that have a bigger height the correct aspect ratio is not used:

这对于图像400px x 220px来说是完美的，但是对于高度较大的图像，不使用正确的纵横比:

.responsive-rectangle {
  width: 100%;
  max-width: 450px;
  background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
  display: flex;
  text-align: center;
}
.responsive-rectangle:before {
  content: "";
  display: block;
  padding-top: 62%;
}
.image-wrapper {
  margin: auto;
}
img {
  width: 100%;
  height: 100%;
}

<div class="responsive-rectangle">
  <div class="image-wrapper">
    <img src="https://res.cloudinary.com/zeek/image/upload/v1444889083/o67qntlwitbxnqz5qyjn.png" alt="">
  </div>
</div>

jsfiddle

jsfiddle

Is there any approach that can solve my problem?

有什么办法可以解决我的问题吗?

Edit: Oh I forgot to note that background-image is not good solution because it does not support SEO.

编辑:哦，我忘了指出背景图像不是好的解决方案，因为它不支持SEO。

2 个解决方案

#1

The problem with your final code is that the pseudo element used for keeping the aspect ratio is not actually performing its desired role. This is because .responsive-rectangle is set to display: flex;. To maintain the aspect ratio you can make the following modifications:

最终代码的问题是，用于保持纵横比的伪元素实际上并没有执行所需的角色。这是因为. response -矩形被设置为:flex;为了保持纵横比，你可以做以下修改:

• Remove the .responsive-rectangle:before rule as the calculation can be done on .image-wrapper itself
• 删除. response -矩形:before规则，因为计算可以在.image-wrapper本身进行
• Remove display: flex; from .responsive-rectangle
• 删除显示:flex;从.responsive-rectangle
• Remove the existing rules for .image-wrapper and replace them with:
  • padding-top: 62%; to ensure the correct aspect ratio is used
  • padding-top:62%;为了确保使用了正确的纵横比
  • position: relative; to allow img to be positioned relative to .image-wrapper
  • 位置:相对;允许img相对于.image-wrapper进行定位
  • width: 100%; to ensure it will fill the entire width of .responsive-rectangle
  • 宽度:100%;确保它将填充. response -矩形的整个宽度
• 删除.image-wrapper的现有规则，并将它们替换为:padding-top: 62%;确保正确的纵横比使用位置:相对;允许img相对于.image-wrapper宽度进行定位:100%;确保它将填充. response -矩形的整个宽度
• Remove the existing rules for img and replace them with:
  • bottom: 0;, left: 0;, margin: auto;, right: 0; and top: 0; to allow the image to be centered in .image-wrapper
  • 底部:0;左:0;边缘:auto;和顶部:0;使图像居中于.image-wrapper中
  • position: absolute; to position it relative to .image-wrapper
  • 位置:绝对的;相对于.image-wrapper定位它
  • max-height: 100%; and max-width: 100%; to ensure the image does not exceed its natural height and width while keeping its aspect ratio
  • max-height:100%;和max-width:100%;确保图像在保持高宽比的同时不超过其自然高度和宽度
• 删除img的现有规则，替换为:bottom: 0;左:0;，margin: auto;右:0;和顶部:0;使图像居中于.image-wrapper位置:绝对;相对于.image-wrapper max-height: 100%;和max-width:100%;确保图像在保持高宽比的同时不超过其自然高度和宽度

.responsive-rectangle {
    background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
    background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
    background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
    background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
    float: left;
    margin: 0 5px;
    max-width: 450px;
    text-align:center;
    width: 100%;
}
.image-wrapper {
    padding-top: 62%;
    position: relative;
    width: 100%;
}
img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    right: 0;
    position: absolute;
    top: 0;
}

<div class="responsive-rectangle">
    <div class="image-wrapper">
        <img src="https://res.cloudinary.com/zeek/image/upload/v1444889083/o67qntlwitbxnqz5qyjn.png" alt="">
    </div>
</div>
<div class="responsive-rectangle">
    <div class="image-wrapper">
        <img src="https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png" alt="">
    </div>
</div>

http://jsfiddle.net/p23pgqp3/

http://jsfiddle.net/p23pgqp3/

#2

I had to lay them out next to each other to see the issue. Here is a solution to your problem, just use the image as a background:

我不得不把它们放在一起看问题。这里有一个解决你的问题的方法，用图片作为背景:

<div class="image-wrapper" style="background-image:url('https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png')"></div>

and then center it

然后中心

.image-wrapper {
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
    background-position: center center;
}

http://jsfiddle.net/bmdqsqx1/1/

http://jsfiddle.net/bmdqsqx1/1/