响应式矩形图片，最大尺寸适应但保持宽高比。

Question

我正在尝试创建一个响应式矩形，它具有以下特点：

1. height 是 width 的 62%
2. background: linear-gradient
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

2. 为了让图片在矩形框内居中，我使用了 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 的图片效果很好， 但是对于高度更大的图片，正确的长宽比没有被使用：

.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。

- zooblin

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/

- Hidden Hobbes

---

非常完美，谢谢！我只改了 height:auto，现在它按预期工作。 - zooblin

Answer 2

我需要将它们并排放置以查看问题。这是您问题的解决方案，只需使用图像作为背景：

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

然后居中它

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

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

- Victor Radu

---

哦，我忘记注明background-image不是一个好的解决方案，因为它不支持SEO。 - zooblin

如果您关心的是SEO，只需在HTML中添加一些结构化数据即可，这将对您的排名产生比图像标记更好的影响（您还可以添加指向文件本身的结构化数据）。例如：http://jsfiddle.net/bmdqsqx1/2/ - Victor Radu

@tripleb 我理解你的意思，但在我看来这个技巧有点不太正规。 - zooblin