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

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

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

分割线

网友回答：

事实证明，还有另一种方法可以做到这一点：。object-fit

<img style='height: 100%; width: 100%; object-fit: contain'/>

会做这项工作。不要忘记包括其他必要的属性，例如和，当然。srcalt

小提琴：http://jsfiddle.net/mbHB4/7364/

分割线

网友回答：

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

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

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

示例：http://jsfiddle.net/xwrvxser/1/

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>

分割线

网友回答：

目前，对于固定大小的图像（如 JPEG 或 PNG 文件），无法确定性地正确执行此操作。

要按比例调整图像大小，您必须将高度或宽度设置为“100%”，但不能同时设置为两者。如果将两者设置为“100%”，则图像将被拉伸。

选择高度还是宽度取决于您的图像和容器尺寸：

如果图像和容器都是“纵向”或“横向形状”（分别比宽度高或宽大于高），则高度和宽度为“%100”并不重要。
如果图像是纵向的，并且容器是横向的，则必须在图像上进行设置。height="100%"
如果图像是横向，容器是纵向，则必须在图像上进行设置。width="100%"

如果图像是 SVG（一种可变大小的矢量图像格式），则可以自动进行扩展以适合容器。

您只需要确保 SVG 文件在标记中没有设置以下属性：<svg>

height
width
viewbox

大多数矢量绘图程序在导出 SVG 文件时都会设置这些属性，因此您必须在每次导出时手动编辑文件，或者编写脚本来执行此操作。

模板简介：该模板名称为【如何自动调整图像大小以适应“div”容器？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。