Html 如何在不拉伸图像的情况下设置图像的宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1733006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set an image's width and height without stretching it?
提问by Paul Tarjan
If I have:
如果我有：
#logo {
width: 400px;
height: 200px;
}
then
然后
<img id="logo" src="logo.jpg"/>
will stretch to fill that space. I want the image to stay the same size, but for it to take up that much space in the DOM. Do I have to add an encapsulating <div>or <span>? I hate adding markup for styling.
将伸展以填充该空间。我希望图像保持相同的大小，但要在 DOM 中占用那么多空间。我是否必须添加封装<div>或<span>？我讨厌为样式添加标记。
回答by cletus
Yes you need an encapsulating div:
是的，您需要一个封装的 div：
<div id="logo"><img src="logo.jpg"></div>
with something like:
像这样：
#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.
其他解决方案（填充、边距）更乏味（因为您需要根据图像的尺寸计算正确的值），但也不能有效地允许容器小于图像。
Also, the above can be adapted much more easily for different layouts. For example, if you want the image at the bottom right:
此外，上述内容可以更轻松地适应不同的布局。例如，如果您想要右下角的图像：
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }
回答by Dante
2017 answer
2017年答案
CSS object fitworks in all current browsers. It allows the imgelement to be larger without stretching the image.
CSS object fit适用于所有当前浏览器。它允许img元素在不拉伸图像的情况下变大。
You can add object-fit: cover;to your CSS.
您可以添加object-fit: cover;到您的 CSS。
回答by SamGoody
Load the image as a background for a div.
加载图像作为 div 的背景。
Instead of:
代替：
<img id='logo' src='picture.jpg'>
do
做
<div id='logo' style='background:url(picture.jpg)'></div>
All browsers will crop the part of the image that doesn't fit.
This has several advantages over wrapping it an element whose overflow is hidden:
所有浏览器都会裁剪图像中不适合的部分。
与将其包装为隐藏溢出的元素相比，这有几个优点：
- No extra markup. The div simply replaces the img.
- Easily center or set the image to another offset. eg.
url(pic) center top; - Repeat the image when small enough. (OK, dunno why you would want that)
- Set a bg color in the same statement, easily apply the same image to multiple elements, and everything that applies to bg images.
- 没有额外的标记。div 只是替换了 img。
- 轻松居中或将图像设置为另一个偏移量。例如。
url(pic) center top; - 当足够小时重复图像。（好吧，不知道你为什么想要那个）
- 在同一个语句中设置 bg 颜色，轻松将相同的图像应用于多个元素，以及适用于 bg 图像的所有内容。
Update: This answer is from before object-fit; you should now probably use object-fit/object-position.
更新：这个答案来自于 object-fit 之前；您现在可能应该使用 object-fit/object-position。
It is still useful for older browsers, for extra properties (such as background-repeat), and for edge cases (For example, workaround Chrome bugs with flexbox and object-position and FF's (former?) issues with grid + autoheight + object-fit. Wrapper divs in grid / flexbox often give... unintuitive results.)
它对于旧浏览器、额外属性（例如背景重复）和边缘情况（例如，使用 flexbox 和对象位置和 FF（以前的？）问题的解决方法 Chrome 错误与网格 + 自动高度 + 对象-适合。网格 / flexbox 中的包装 div 通常会给出......不直观的结果。）
回答by theCrab
CSS3 object-fit
CSS3 对象适配
Am not sure how far its been implemented by webkit, IE and firefox. But Opera works like magic
我不确定 webkit、IE 和 firefox 的实现程度。但歌剧就像魔法一样
object-fitworks with SVG content, but the same effect can also be achieved by setting thepreserveAspectRatio=""attribute in the SVG itself.
object-fit适用于 SVG 内容，但同样的效果也可以通过preserveAspectRatio=""在 SVG 本身中设置属性来实现。
img {
height: 100px;
width: 100px;
-o-object-fit: contain;
}
Chris Mills demo's it here http://dev.opera.com/articles/view/css3-object-fit-object-position/
Chris Mills 演示在这里http://dev.opera.com/articles/view/css3-object-fit-object-position/
回答by Manoj Selvin
#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;
}
回答by Sabba Keynejad
Make a div and give it a class. Then drop a img in it.
制作一个 div 并给它一个类。然后在里面放一个img。
<div class="mydiv">
<img src="location/of/your/image" ></img>
</div>
Set the size of your div and make it relative.
设置 div 的大小并使其相对。
.mydiv {
position: relative;
height:300px;
width: 100%;
overflow: hidden;
}
then style your image
然后设计你的形象
img {
width: 100%;
height: auto;
overflow: hidden;
}
Hope that helps
希望有帮助
回答by Pekka
Do I have to add an encapsulating <div> or <span>?
我是否必须添加封装的 <div> 或 <span>？
I think you do. The only thing that comes to mind is padding, but for that you would have to know the image's dimensions beforehand.
我想你会。唯一想到的是填充，但为此您必须事先知道图像的尺寸。
回答by PurTahan
You can use as below :
您可以使用如下：
.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" />回答by nakul2013
This is quite old question, but I have had the exact same annoying issue where everything worked fine for Chrome/Edge (with object-fit property) but same css property did not work in IE11 (since its unsupported in IE11), I ended up using HTML5 "figure" element which solved all my problems.
这是一个很老的问题，但我遇到了完全相同的烦人问题，Chrome/Edge 一切正常（具有对象适合属性），但相同的 css 属性在 IE11 中不起作用（因为它在 IE11 中不受支持），我结束了使用 HTML5 "figure" 元素解决了我所有的问题。
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.
我个人没有使用外部 DIV 标签，因为这对我来说根本没有帮助，所以我避免使用外部 DIV 并简单地替换为 'figure' 元素。
The below code forces the image to reduce/scale down nicely (without changing the original aspect ratio).
下面的代码强制图像很好地缩小/缩小（不改变原始纵横比）。
<figure class="figure-class">
<img class="image-class" src="{{photoURL}}" />
</figure>
and css classes:
和 css 类：
.image-class {
border: 6px solid #E8E8E8;
max-width: 189px;
max-height: 189px;
}
.figure-class {
width: 189px;
height: 189px;
}
回答by Bless Yahu
you can try setting the padding instead of the height/width.
您可以尝试设置填充而不是高度/宽度。
