如何自动调整图像大小以适合“ div”容器？

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

您如何自动调整大图像的大小，以使其适合较小的div容器，同时保持其宽高比？

示例：当图像插入到编辑器面板上并且图像太大而无法容纳在页面上时，图像将自动调整大小。

回答：

请勿对图片标签应用明确的宽度或高度。相反，给它：

max-width:100%;
max-height:100%;

另外，height: auto;如果只想指定宽度。

img {
    max-width: 100%;
    max-height: 100%;
}
.portrait {
    height: 80px;
    width: 30px;
}
.landscape {
    height: 30px;
    width: 80px;
}
.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

以上是 如何自动调整图像大小以适合“ div”容器？ 的全部内容， 来源链接： utcz.com/qa/398543.html