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

小编典典

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

html

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

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

阅读 409

2020-05-10

共1个答案

小编典典

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

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>

2020-05-10