如何在div内放置图像（img）并保持纵横比？

• Z时代
• 2024-01-10
• 分类：问答

我有一个48x48的div，里面有一个img元素，我想将它放到div中而不丢失任何部分，同时保持比例，是否可以使用html和css实现？

回答：

如果您在编写CSS时不知道图像的尺寸，则需要一些JavaScript来防止裁剪。

HTML和JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>
<script type="text/javascript">
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};
}());
</script>

的CSS

#container {
   width: 48px;
   height: 48px;
}
#container img {
   width: 100%;
}

如果您使用JavaScript库，则可能要利用它。

以上是 如何在div内放置图像（img）并保持纵横比？ 的全部内容， 来源链接： utcz.com/qa/426982.html