如何设置图像的宽度和高度而不拉伸它？

If I have:

#logo {
width: 400px;
height: 200px;
}

那么

<img id="logo" src="logo.jpg"/>

将会填满那个空间。我希望图像保持相同的大小，但是要在 DOM 中占用那么大的空间。我必须添加一个封装 <div>或 <span>？我讨厌为样式添加标记。

376004 次浏览
小开

我必须添加封装 < div > 还是 < span > ？

我觉得你知道。唯一浮现在脑海中的就是填充，但是要做到这一点，你必须事先知道图像的尺寸。

小开
最佳答案

是的，您需要一个封装的 div:

<div id="logo"><img src="logo.jpg"></div>

比如:

#logo { height: 100px; width: 200px; overflow: hidden; }

Other solutions (padding, margin) are more tedious (in that you need to calculate the right value based on the image's dimensions) but also don't effectively allow the container to be smaller than the image.

此外，上述可以更容易地适应不同的布局。例如，如果你想要右下角的图片:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }
小开

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

小开

我能想到的是拉伸宽度或高度，让它在比例方面调整大小。两边会有一些空白。就像宽屏显示1024x768的分辨率。

小开

加载图像作为 div 的背景。

而不是:

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

do

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

所有浏览器都会裁剪图像中不匹配的部分。
这比将其包装为隐藏溢出的元素有几个优点:

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

更新: 这个答案来自于 object-fit 之前; 您现在可能应该使用 object-fit/object-position。

对于老版本的浏览器，额外的属性(例如后台重复) ，以及边缘情况(例如，使用 Flexbox 和对象定位以及 FF (前者?)解决 Chrome 的 bug) ，它仍然很有用网格 + 自动高度 + 对象匹配的问题。包装器 div 在网格/柔性盒经常给... 不直观的结果。)

小开

CSS3 object-fit

Am not sure how far its been implemented by webkit, IE and firefox. But Opera works like magic

object-fit可以处理 SVG 内容，但是也可以通过在 SVG 本身中设置 preserveAspectRatio=""属性来达到同样的效果。

img {
height: 100px;
width: 100px;
-o-object-fit: contain;
}

克里斯米尔斯演示它在这里 http://dev.opera.com/articles/view/css3-object-fit-object-position/

小开

创建一个 div 并给它一个类，然后在其中放入一个 img。

<div class="mydiv">


<img src="location/of/your/image" ></img>


</div>

设置 div 的大小并使其相对。

    .mydiv {
position: relative;
height:300px;
width: 100%;
overflow: hidden;
}

then style your image

img {
width: 100%;
height: auto;
overflow: hidden;
}

希望能帮上忙

小开

If using flexbox is a valid option for you (don't need to suport old browsers), check my other answer 给你 (which is possibly a duplicate of this one):

基本上，你需要把你的 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%;
}
}
小开

2017年的答案

CSS object fit 适用于所有当前的浏览器，它允许 img元素变大而不会拉伸图像。

You can add object-fit: cover; to your CSS.

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

你可使用以下连结:

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

小开

这是一个很老的问题，但是我也遇到过同样的烦人的问题: Chrome/Edge (带有对象适合的属性)所有的东西都很好用，但是相同的 css 属性在 IE11中不能工作(因为它在 IE11中不支持) ，我最终使用 HTML5的“图”元素解决了我所有的问题。

I personally did not use the outer DIV tag since that did not help at all in my case, so I avoided the outer DIV and simply replaced with 'figure' element.

下面的代码迫使图像很好地缩小/缩小(而不改变原始的纵横比)。

<figure class="figure-class">
<img class="image-class" src="\{\{photoURL}}" />
</figure>

and css classes:

.image-class {
border: 6px solid #E8E8E8;
max-width: 189px;
max-height: 189px;
}


.figure-class {
width: 189px;
height: 189px;
}
小开 
<img style="object-fit: contain" src="...">

对我来说很有效。


提交答案