Html 如何将图像 (img) 放入 div 并保持纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4394309/
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 do I fit an image (img) inside a div and keep the aspect ratio?
提问by Bin Chen
I have a 48x48 div and inside it there is an img element, I want to fit it into the div without losing any part, in the mean time the ratio is kept, is it achievable using html and css?
我有一个 48x48 的 div，里面有一个 img 元素，我想将它放入 div 中而不丢失任何部分，同时保持比例，是否可以使用 html 和 css 实现？
采纳答案by Thomas
You will need some JavaScript to prevent cropping if you don't know the dimension of the image at the time you're writing the css.
如果您在编写 css 时不知道图像的尺寸，您将需要一些 JavaScript 来防止裁剪。
HTML & JavaScript
HTML 和 JavaScript
<div id="container">
<img src="something.jpg" alt="" />
</div>
<script type="text/javascript">
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if(img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
</script>
CSS
CSS
#container {
width: 48px;
height: 48px;
}
#container img {
width: 100%;
}
If you use a JavaScript Library you might want to take advantage of it.
如果您使用 JavaScript 库，您可能希望利用它。
回答by Michael
Use max-height:100%; max-width:100%;for the image inside the div.
使用max-height:100%; max-width:100%;了DIV内的图像。
回答by Andrii Verbytskyi
Unfortunately max-width + max-height do not fully cover my task... So I have found another solution:
不幸的是 max-width + max-height 并没有完全覆盖我的任务......所以我找到了另一个解决方案：
To save the Image ratiowhile scaling you also can use object-fitCSS3 propperty.
要在缩放时保存图像比例，您还可以使用object-fitCSS3 属性。
Useful article: Control image aspect ratios with CSS3
有用的文章：使用 CSS3 控制图像纵横比
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
Bad news: IE not supported (Can I Use)
坏消息：不支持 IE（我可以使用吗）
回答by Max
Using CSS only:
仅使用 CSS：
div > img {
width: auto;
height : auto;
max-height: 100%;
max-width: 100%;
}
回答by alex
HTML
HTML
<div>
<img src="something.jpg" alt="" />
</div>
CSS
CSS
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
This will make the image expand to fill its parent, of which its size is set in the divCSS.
这将使图像扩展以填充其父级，其大小在divCSS 中设置。
回答by Bartho Bernsmann
I was having a lot of problems to get this working, every single solution I found didn't seem to work.
我遇到了很多问题才能使其正常工作，我发现的每个解决方案似乎都不起作用。
I realized that I had to set the div display to flex, so basically this is my CSS:
我意识到我必须将 div 显示设置为 flex，所以基本上这是我的 CSS：
div{
display: flex;
}
div img{
max-height: 100%;
max-width: 100%;
}
回答by Faisal
Try CSS:
试试 CSS：
img {
object-fit: cover;
height: 48px;
}
回答by VSchlattinger
For me, the following CSS worked (tested in Chrome, Firefox and Safari).
对我来说，以下 CSS 有效（在 Chrome、Firefox 和 Safari 中测试）。
There are multiple things working together:
有很多事情可以协同工作：
max-height: 100%;,max-width: 100%;andheight: auto;,width: auto;make the img scale to whichever dimension first reaches 100% while keeping the aspect ratioposition: relative;in the container andposition: absolute;in the child together withtop: 50%;andleft: 50%;center the top left corner of the img in the containertransform: translate(-50%, -50%);moves the img back to the left and top by half its size, thus centering the img in the container
max-height: 100%;,max-width: 100%;和height: auto;,width: auto;使 img 缩放到首先达到 100% 的尺寸，同时保持纵横比position: relative;在容器和position: absolute;孩子中，top: 50%;并left: 50%;在容器中将 img 的左上角居中transform: translate(-50%, -50%);将 img 向左和顶部移动其大小的一半，从而使 img 在容器中居中
CSS:
CSS：
.container {
height: 48px;
width: 48px;
position: relative;
}
.container > img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
回答by Webveloper
Setting the photo as a background image will give us more control over size and placement, leaving the img tag to serve a different purpose...
将照片设置为背景图像将使我们能够更好地控制尺寸和位置，让 img 标签用于不同的目的......
Below, if we want the div to be the same aspect ratio as the photo, then placeholder.png is a small transparent image with the same aspect ratio as photo.jpg. If the photo is a square, it's a 1px x 1px placeholder, if the photo is a video thumbnail, it's a 16x9 placeholder, etc.
下面，如果我们希望 div 与照片的纵横比相同，那么 placeholder.png 是一个与 photo.jpg 纵横比相同的透明小图像。如果照片是正方形，则是 1px x 1px 占位符，如果照片是视频缩略图，则是 16x9 占位符等。
Specific to the question, use a 1x1 placeholder to maintain the div's square ratio, with a background image using background-sizeto maintain the photo's aspect ratio.
具体到这个问题，使用 1x1 占位符来保持 div 的平方比，使用背景图像background-size来保持照片的纵横比。
I used background-position: center center;so the photo will be centered in the div. (Aligning the photo in the vertical center or bottom would get ugly with the photo in the img tag.)
我用过，background-position: center center;所以照片将在 div 中居中。（在垂直中心或底部对齐照片会使 img 标签中的照片变得丑陋。）
div {
background: url(photo.jpg) center center no-repeat;
background-size: contain;
width: 48px; // or a % in responsive layout
}
img {
width: 100%;
}
<div><img src="placeholder.png"/></div>
To avoid an extra http request, convert the placeholder image to a data: URL.
为避免额外的 http 请求，请将占位符图像转换为 data: URL。
<img src="data:image/png;base64,..."/>
回答by Saurabh Sheorain
you can use class "img-fluid"for newer version i.e Bootstrap v4.
您可以将“img-fluid”类用于较新版本，即Bootstrap v4。
and can use class "img-responsive"for older version like Bootstrap v3.
并且可以为旧版本（如Bootstrap v3 ）使用类“img-responsive”。
Usage:-
用法：-
imgtag with :-
img标签：-
class="img-fluid"
class= "img-fluid"
src="..."
src= "..."
