我遇到这种情况,我希望将div
渲染为正方形,其中高度决定宽度。到目前为止,唯一一个非常接近的解决方案是使用1px x 1xx图像:
<div class="square">
<img src="data:image/gif;base64,R0lGODlhA...RAA7">
</div>
.square {
display:inline-flex;
height:100%;
background:darkorange;
}
img {
display:block;
height:100%;
width:auto;
}
但无论我尝试什么,当我改变高度时,正方形是垂直拉伸的(不再是正方形)。你必须重新加载以使其再次成为正方形。这似乎只发生在Chrome中。虽然在original post中建议display: inline-flex
使用.square
但它似乎无法正常工作。也许我错过了什么。有什么建议?