如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
如果您使用Bootstrap，只需将img响应类添加到img标记：
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
引导映像
其他回答
这是我的解决方案。您需要将图片插入两次。但它不使用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>
下面的代码改编自以前的答案，由我使用名为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>
有几种方法可以使图像适合＜div＞。
img {
object-fit: cover;
}
CSS对象适合属性用于指定如何调整＜img＞或＜video＞的大小以适合其容器。
此属性告诉内容以多种方式填充容器；例如“保持该纵横比”或“拉伸并尽可能多地占用空间”。
fill-这是默认值。调整图像大小以填充给定尺寸。如有必要，图像将被拉伸或压扁以适合contain-图像保持其纵横比，但调整大小以适应给定的尺寸封面-图像保持其纵横比并填充给定的尺寸。将剪裁图像以适合none-图像未调整大小缩小-图像缩小到无或包含的最小版本
你可以在这里找到更多的工作样本。
正如我在2014年Codepen示例中所看到的，我已经制定了一个解决方案，可以在尽可能少的javascript的帮助下处理任何未知的宽度/高度（纵横比）组合，以在容器的纵横比高于/低于图像的纵横比时更改图像居中的CSS：
尝试通过拖动右下角来调整容器大小：
//检测当前图像的窗口宽度是否过窄//并且适合于100%的高度而不是100%的宽度。const photo=文档.images[0]const onPhotoResize=新建ResizeObserver（条目=>window.requestAnimationFrame（checkRatio）)onPhotoResize观察（photo.parentNode）函数checkRatio（）{const photoParent=photo.parentNode，imageAspectRatio=照片客户端宽度/照片客户端高度，parentAspectRatio=photoParent.clientWidth/photoPrent.clientHeightphoto.classList[imageAspectRatio>parentAspectRatio？'add'：'remove']（'max'）}.box格式{宽度：20%；高度：60%；边距：自动；位置：绝对；顶部：0；左：0；右：0；底部：0；调整大小：两者；溢出：隐藏；边框：5px纯红色；} .box>img{位置：绝对；顶部：50%；左：50%；宽度：100%；转换：转换（-50%，-50%）；}.box>img.max｛width:auto；height:100%；｝<div class='box'><img src=“https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg"></div>
我使用以下代码修复了此问题：
<div class="container"><img src="image_url" /></div>
.container {
height: 75px;
width: 75px;
}
.container img {
object-fit: cover;
object-position: top;
display: block;
height: 100%;
width: 100%;
}
