如果我有：
#logo {
width: 400px;
height: 200px;
}
然后
<img id="logo" src="logo.jpg"/>
将拉伸以填充该空间。我希望图像保持相同大小，但要占用 DOM 中的那么多空间。是否必须添加封装<div> 或<span>？我讨厌为样式添加标记。
【问题讨论】：
是的，你需要一个封装的 div：
<div id="logo"><img src="logo.jpg"></div>
类似：
#logo { height: 100px; width: 200px; overflow: hidden; }
其他解决方案（填充、边距）更繁琐（因为您需要根据图像的尺寸计算正确的值）但也不能有效地允许容器小于图像。
此外，上述内容可以更轻松地适应不同的布局。例如，如果你想要右下角的图像：
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }
【讨论】：
（如果其他），将 title 和 alt 属性应用于 ，因此您可以添加 SEO 友好的标记。它们也是块级元素，例如 div，可以作为裁剪功能的包装器。
【讨论】：
加载图像作为 div 的背景。
代替：
<img id='logo' src='picture.jpg'>
做
<div id='logo' style='background:url(picture.jpg)'></div>
所有浏览器都会裁剪图片中不适合的部分。
与将其包装为隐藏溢出的元素相比，这有几个优点：
url(pic) center top;
更新：这个答案来自 object-fit 之前；您现在应该使用 object-fit/object-position。
对于旧版浏览器、额外属性（例如 background-repeat）和边缘情况（例如，解决 Chrome 的 flexbox 和 object-position 错误以及 FF（以前？）grid + autoheight 问题）仍然有用+ object-fit. grid / flexbox 中的包装器 div 经常给出......不直观的结果。）
【讨论】：
background-repeat:no-repeat !important; float:left; width:100px; height:100px;
CSS3 对象适配
我不确定 webkit、IE 和 firefox 实现了多远。但 Opera 就像魔法一样工作
object-fit适用于 SVG 内容，但也可以通过在 SVG 本身中设置preserveAspectRatio=""属性来实现相同的效果。
img {
height: 100px;
width: 100px;
-o-object-fit: contain;
}
Chris Mills 演示在这里 http://dev.opera.com/articles/view/css3-object-fit-object-position/
【讨论】：
#logo {
width: 400px;
height: 200px;
/*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
object-fit:scale-down;
}
【讨论】：
制作一个 div 并给它一个类。然后在里面放一个img。
<div class="mydiv">
<img src="location/of/your/image" ></img>
</div>
设置 div 的大小并使其相对。
.mydiv {
position: relative;
height:300px;
width: 100%;
overflow: hidden;
}
然后为您的图像设置样式
img {
width: 100%;
height: auto;
overflow: hidden;
}
希望有帮助
【讨论】：
你可以如下使用：
.width100 {
max-width: 100px;
height: 100px;
width: auto;
border: solid red;
}<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />【讨论】：
我必须添加封装
或 吗？我想你会的。唯一想到的是填充，但为此您必须事先知道图像的尺寸。
【讨论】：
您可以尝试设置填充而不是高度/宽度。
【讨论】：
我能想到的是拉伸宽度或高度，并让它按比例调整大小。两边会有一些空白。类似于宽屏如何显示 1024x768 的分辨率。
【讨论】：
如果使用 flexbox 对您来说是一个有效的选择（不需要支持旧浏览器），请查看我的另一个答案 here（可能与这个答案重复）：
基本上你需要将你的 img 标签包装在一个 div 中，你的 css 看起来像这样：
.img__container {
display: flex;
padding: 15px 12px;
box-sizing: border-box;
width: 400px; height: 200px;
img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
}
【讨论】：
这是一个相当老的问题，但我遇到了完全相同的烦人问题，Chrome/Edge 一切正常（具有对象匹配属性），但相同的 css 属性在 IE11 中不起作用（因为它在 IE11 中不受支持），我最终使用了 HTML5“figure”元素，它解决了我所有的问题。
我个人没有使用外部 DIV 标记，因为这对我的情况根本没有帮助，所以我避免使用外部 DIV 并简单地替换为 'figure' 元素。
下面的代码强制图像很好地缩小/缩小（不改变原始纵横比）。
<figure class="figure-class">
<img class="image-class" src="{{photoURL}}" />
</figure>
和 css 类：
.image-class {
border: 6px solid #E8E8E8;
max-width: 189px;
max-height: 189px;
}
.figure-class {
width: 189px;
height: 189px;
}
【讨论】：
<img style="object-fit: contain" src="...">
非常适合我。
【讨论】：