如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
您必须告诉浏览器您放置它的高度：
.example {
height: 220px; /* DEFINE HEIGHT */
background: url('../img/example.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
其他回答
目前，对于固定大小的图像（如JPEG或PNG文件），无法以确定性的方式正确执行此操作。
要按比例调整图像大小，必须将高度或宽度设置为“100%”，但不能同时设置两者。如果将两者都设置为“100%”，则图像将被拉伸。
选择高度还是宽度取决于图像和容器尺寸：
如果您的图像和容器都是“肖像形状”或“风景形状”（分别比它们宽或宽），那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的，而容器是横向的，则必须在图像上设置height=“100%”。如果图像是横向的，而容器是纵向的，则必须在图像上设置width=“100%”。
如果您的图像是SVG，这是一种可变大小的矢量图像格式，则可以自动展开以适应容器。
您只需确保SVG文件中没有在<SVG>标记中设置这些财产：
height
width
viewbox
大多数矢量绘图程序在导出SVG文件时都会设置这些财产，因此每次导出时都必须手动编辑文件，或者编写脚本来进行编辑。
下面的代码改编自以前的答案，由我使用名为storm.jpg的图像进行测试。
这是显示图像的简单页面的完整HTML代码。这很完美，我用www.resizemybrowser.com测试过。把CSS代码放在HTML代码的顶部，放在你的头部下面。把图片代码放在你想要的地方。
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
这是我的解决方案。您需要将图片插入两次。但它不使用js，img将调整为宽度和高度。您可以单击“运行代码片段-完整页面”，打开开发控制台并调整窗口宽度以查看响应效果。/*响应宽度*/.响应宽度{背景：lightsalmon；高度：100px；宽度：50%；}/*Widthlimit公司*/.最大宽度{背景：海军；高度：200px；宽度：100px；}.div1{最大高度：100%；位置：相对；框大小：内容框；/*中心：*/顶部：50%；变换：translateY（-50%）；}.边缘{高度：自动；最大宽度：100%；不透明度：0；}.div2{高度：100%；宽度：配合内容；位置：绝对；顶部：0；/*中心：*/左：50%；变换：translateX（-50%）；}.mainimg{最大高度：100%；最大宽度：100%；}<div class=“responsivewidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div><div class=“maxedbywidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div>
下面是一个简单的解决方案（4步修复！！），似乎对我有用。该示例使用宽度来确定整体大小，但也可以翻转宽度以使用高度。
将CSS样式应用于图像容器（例如，<img>）将宽度属性设置为所需的尺寸对于尺寸，使用%表示相对大小或自动缩放（基于图像容器或显示）对静态维度或集合维度使用px（或其他）将高度属性设置为根据宽度自动调整享受！
例如
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
让它变得简单！
给容器一个固定的高度，然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是，您将宽度设置为100%，而不是最大宽度。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
