Html 当图像比 div 宽时，如何使图像适合 div 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3650740/
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 can I make an image fit inside a div element when the image is wider than the div?
提问by Richard77
I've an image tag inside a div element.
我在 div 元素中有一个图像标签。
<div id = "myDiv">
<img alt = "myImage" src = "some_source"/>
</div>
The image is bigger than the div, so the image is not inside the div element. First, I've thought about using width = x, height = y. But as I'm still designing the page, I fear to have to worry all the time those 2 dimensions.
图像比 div 大，因此图像不在 div 元素内。首先，我考虑过使用width = x, height = y。但是当我还在设计页面时，我害怕一直担心那些 2 维。
How can I keep the image inside the div element? also, respecting the dimensions of the div element?
如何将图像保留在 div 元素内？另外，尊重 div 元素的尺寸？
Thanks for helping
谢谢你的帮助
回答by Aseem Gautam
From here: Three ways to resize images to fit a DIV
Using the STYLE attribute within the IMG tag to manually set the width or height for each image (essentially the same as #1).
使用 IMG 标签中的 STYLE 属性手动设置每个图像的宽度或高度（基本上与 #1 相同）。
<div id="img_box">
<img style="width: 100%;" src="path/to/horizontal_image.jpg" />
</div>
<div id="img_box">
<img style="height: 100%;" src="path/to/vertical_image.jpg" />
</div>
Hope it solves your problem.
希望它能解决你的问题。
Edit: Best solution is to actually resize the image with server-side script. Scaling images in the browser does not usually work out very well.
编辑：最佳解决方案是使用服务器端脚本实际调整图像大小。在浏览器中缩放图像通常效果不佳。
回答by Ajeet Sinha
This worked for me .
这对我有用。
.myimg {width:200px; height:auto;}
Automatically re-sizes images in all browsers .
在所有浏览器中自动重新调整图像大小。
回答by Nicholas
Guys after spending too much time looking around for an easier way to do this, I combine the info from research to do it like this: (simply using the getimagesize()function -if the height is larger than the width, echo an image tag with a style having a height of 100% else echo the same image tag but with a style having a width of 100%);
伙计们花了太多时间四处寻找更简单的方法来做到这一点后，我结合了研究中的信息来这样做：（只需使用该getimagesize()功能 - 如果高度大于宽度，则回显带有样式的图像标签具有 100% 的高度，否则与相同的图像标签相呼应，但具有宽度为 100% 的样式）；
$image = "path to your image";
$img_size = getimagesize($image);
if ($img_size[0] < $img_size[1]){echo " < img src= '$image' style='height:100%;'>";}
else {echo "< img src= '$image' style='width:100%;'>";}
回答by ProGrammar
Since this post is from a while ago, I figure I'd update it with a more modern way of doing this that requires no JS.
由于这篇文章是前一段时间的文章，我想我会用一种不需要 JS 的更现代的方式来更新它。
I'd recommend using the CSS properties background-size:coverand background-position: centerto stretch, crop, and position the image (using background-imageto set the image to the div).
我建议使用 CSS 属性background-size:cover并background-position: center拉伸、裁剪和定位图像（background-image用于将图像设置为 div）。
It will set the image to shrink or grow to fit the div entirely then crop off anything outside of the div. It is a great way to handle images of somewhat different shapes and sizes in a div.
它会将图像设置为缩小或增长以完全适合 div，然后裁剪掉 div 之外的任何内容。这是在 div 中处理形状和大小略有不同的图像的好方法。
HTML
HTML
<div class="flexbox-container">
<div class="filled-with-image"></div>
</div>
CSS
CSS
.flexbox-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: center;
}
.filled-with-image {
width: 50%;
height:400px;
background-image: url(http://unsplash.it/1500/1000?image=875);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center bottom;
}
