html - 图像适合最大尺寸同时保持纵横比的响应式矩形

Question

我正在尝试创建一个具有以下内容的响应式矩形:

1. height 是 width
的 62%
2. 背景:线性渐变
3. 矩形内是一个垂直和水平居中的最大尺寸的图像，所有图像具有相同的 width: 400px 但不同的 height

我之前做过的:

1. 为了获得响应式矩形，我使用了这种方法:

.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

1. 为了在矩形内对齐图像，我使用了 display:flex; 和 text-align:center; 以及 .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

这在图像 400px x 220px 的情况下非常有效，但是对于具有更大 height 的图像，未使用正确的纵横比:

.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

有什么方法可以解决我的问题吗？

编辑:哦，我忘了注意 background-image 不是好的解决方案，因为它不支持 SEO。

Answer 1

最终代码的问题是用于保持纵横比的伪元素实际上并没有发挥其预期的作用。这是因为 .responsive-rectangle 设置为 display: flex;。要保持宽高比，您可以进行以下修改:

• 删除 .responsive-rectangle:before 规则，因为计算可以在 .image-wrapper 本身上完成
• 从 .responsive-rectangle 中移除 display: flex;
• 删除 .image-wrapper 的现有规则并将其替换为:
  • padding-top: 62%; 确保使用正确的纵横比
  • position: relative; 允许 img 相对于 .image-wrapper
  定位
  • width: 100%; 以确保它将填满 .responsive-rectangle
  的整个宽度
• 删除 img 的现有规则并将其替换为:
  • bottom: 0;, left: 0;, margin: auto;, right: 0;和 top: 0; 允许图像在 .image-wrapper
  中居中
  • position: absolute; 相对于 .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/