我有下面的代码,它设置了一个容器,当浏览器调整大小时,这个容器的高度会随着宽度的变化而变化(以保持正方形的纵横比)。
HTML
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<IMG HERE>
</div>
</div>
CSS
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
如何在容器内垂直对齐IMG?我所有的图像都有可变的高度,容器不能有固定的高度/线高,因为它是响应式的……请帮帮我!
https://stackoverflow.com/questions/18516317
复制相似问题