Question

我正在尝试创建一个响应式矩形，其中包含：

height占width
background: linear-gradient
是垂直和水平居中且最大尺寸的图像，所有图像都具有相同的width: 400px但不同的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));
}
.responsive-rectangle:before {
  content: "";
  display: block;
  padding-top: 62%;
}

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

jsfiddle

将矩形内部的图像对齐我使用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本身
从display: flex;

.responsive-rectangle

删除.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%;确保图片不会超过其自然height和width，同时保持其宽高比

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

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/

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

2 个答案: