如何自动调整图像大小使其适合div container?
0 653
0

如何自动调整大图像的大小,使其适合较小的div container,同时保持其宽高比?

比如:当图像插入到编辑器面板上且图像太大而无法容纳在页面上时,图像将自动调整大小。

收藏
2021-03-19 16:20 更新 正直的烤面包 •  4004
共 1 个回答
高赞 时间
0

不要对图片标签应用明显的宽度或高度。 相反,应使其如下:

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>

参考https://stackoverflow.com/a/3029434/15018571

收藏
2021-03-19 16:25 更新 阿托 •  17063