我正在尝试创建一个响应式矩形,它具有以下特点:
height
是width
的 62%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>
- 为了让图片在矩形框内居中,我使用了
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>
这段代码对于 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>
有没有什么方法可以解决我的问题?
编辑:
哦,我忘了注明background-image
不是一个好的解决方案,因为它不支持SEO。
height:auto
,现在它按预期工作。 - zooblin