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

如果我有：

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

然后

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

将延伸填补这个空间。 我希望图像保持相同的大小，但要占用DOM中的那么多空间。 我必须添加封装的<div>或<span>吗？ 我讨厌添加样式的标记。

Answer 1

是的，你需要一个封装的div：

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

像这样的东西：

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

其他解决scheme（填充，边距）更乏味（因为您需要根据图像的尺寸计算正确的值），但也不能有效地使容器比图像小。

而且，以上可以更容易地适应不同的布局。 例如，如果您想要右下方的图片：

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

Answer 2

加载图像作为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图像的所有内容。

Answer 3

CSS3对象适合

我不确定它已经被webkit，IE和firefox实现了多less。 但歌剧的作品像魔术一样

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/

Answer 4

做一个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; } 

希望有所帮助

Answer 5

您可以添加物object-fit: cover; 到你的CSS，它会自动裁剪图像

Answer 6

我必须添加封装的<div>或<span>吗？

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

Answer 7

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

Answer 8

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

Answer 9

我能想到的是拉伸宽度或高度，并让它在比例方面resize。 两边会有一些白色的空间。 就像宽屏幕显示1024×768的分辨率。

Answer 10

我所做的只是改变img标签的样式表。 但在我的情况下，我知道容器div和高度。 此外容器div，高度大于实际图像大小。 希望这可以帮助。

为我工作。

http://guntucomputerhacks.blogspot.com.au/2014/08/force-image-width-and-height-without.html

Answer 11

如果使用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%; } }