我正在使用flexbox来显示一排块。每个块都使用flexbox来显示元素的列。其中一个元素是需要保持其纵横比的图像。下面的代码是我简化后的代码,说明了我要做的事情。
在Chrome中,图像缩放到186px x 186px。在IE11中,它们显示为186px x 500px。我已经尝试将图像包装在另一个div中,并将其高度和/或宽度设置为100%,但无论如何都不能同时适用于Chrome和IE11。
在Chrome中,图像缩放到186px x 186px。在IE11中,它们显示为186px x 500px。我已经尝试将图像包装在另一个div中,并将其高度和/或宽度设置为100%,但无论如何都不能同时适用于Chrome和IE11。
section {
max-width: 600px;
margin: 0 auto;
}
.grid {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
margin-top: 10px;
}
.block {
margin: 0;
flex: 1 0 150px;
margin-left: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.block img {
width: 100%;
}
<section>
<div class="grid">
<div class="block">
<img src="http://placehold.it/500" alt="">
<h2>Block title</h2>
</div>
<div class="block">
<img src="http://placehold.it/500" alt="">
<h2>Block title</h2>
</div>
<div class="block">
<img src="http://placehold.it/500" alt="">
<h2>Block title</h2>
</div>
</div>
</section>