如何在不拉伸的情况下设置图像的宽度和高度？

如果我有：

#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; }

2017年答案

CSS对象适合可在所有当前浏览器中使用。它允许img元素变大而无需拉伸图像。

您可以添加object-fit: cover;到CSS。

加载图像作为div的背景。

代替：

<img id='logo' src='picture.jpg'>

做

<div id='logo' style='background:url(picture.jpg)'></div>

所有浏览器都会裁切图像中不合适的部分。
与将其包装为隐藏了溢出的元素相比，这具有几个优点：

1. 没有额外的标记。div只是替换了img。
2. 轻松居中或将图像设置为其他偏移量。例如。url(pic) center top;
3. 足够小的时候重复图像。（好吧，不知道为什么你要那样）
4. 在同一条语句中设置bg颜色，轻松将同一图像应用于多个元素，以及应用于bg图像的所有内容。

更新：这个答案来自对象适合之前；您现在应该使用object-fit / object-position。

对于较旧的浏览器，其他属性（例如背景重复）和边缘情况（例如，解决具有Flexbox和对象位置的Chrome错误以及网格+自动高度+对象-FF的问题），它仍然很有用网格/ flexbox中的包装div通常会给出...直观的结果。）

CSS3对象适合

我不确定webkit，IE和firefox是否已实现该功能。但是歌剧的运作就像魔术

object-fit可以与SVG内容一起使用，但是通过preserveAspectRatio=""在SVG本身中设置属性也可以达到相同的效果。

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" />

是否必须添加封装<div>或<span>？

我想你是。唯一想到的就是填充，但是为此您必须事先知道图像的尺寸。

您可以尝试设置填充而不是高度/宽度。

我能想到的是拉伸宽度或高度，并使其按比例进行调整。两侧会有一些空白。宽屏显示分辨率为1024x768的方式。

如果使用flexbox对您有效（不需要支持旧的浏览器），请在此处检查我的其他答案（可能与该答案重复）：

基本上，您需要将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的所有功能都可以正常工作（具有object-fit属性），但是相同的css属性在IE11中不起作用（因为IE11中不支持它）使用HTML5“图”元素解决了我所有的问题。

我个人不使用外部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;
}