如何在调整大小时保持图像宽高比

时间:2018-03-16 22:42:14

标签: html css html5 css3

我遇到这种情况,我希望将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;
}

SourceJSFIDDLE

但无论我尝试什么,当我改变高度时,正方形是垂直拉伸的(不再是正方形)。你必须重新加载以使其再次成为正方形。这似乎只发生在Chrome中。虽然在original post中建议display: inline-flex使用.square但它似乎无法正常工作。也许我错过了什么。有什么建议?

0 个答案:

没有答案