Html CSS 缩小图像以适应包含 div，而不指定原始大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18606473/
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
CSS scale down image to fit in containing div, without specifing original size
提问by Muteking
I want to have a website where I can upload images of different sizes to be displayed in a jquery slider. I can't seem to fit (scaling down) the image in a containing div. Here's how I'm intending to do it
我想要一个网站，我可以在其中上传要在 jquery 滑块中显示的不同大小的图像。我似乎无法适应（缩小）包含 div 中的图像。这是我打算这样做的方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>
<body>
<div id="wrapper">
<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>
</div>
</body>
</html>
And the CSS
和 CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
I've tried to set the max-width of my image to 100% in CSS. But that doens't work.
我试图在 CSS 中将图像的最大宽度设置为 100%。但这不起作用。
回答by dc5
You can use a background imageto accomplish this;
您可以使用背景图像来完成此操作；
From MDN - Background Size: Contain:
来自 MDN -背景大小： 包含：
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
该关键字指定背景图片在确保其尺寸小于或等于背景定位区域的对应尺寸的情况下，应缩放到尽可能大。
CSS:
CSS：
#im {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: contain;
}
HTML:
HTML：
<div id="wrapper">
<div id="im">
</div>
</div>
回答by Woody Payne
This is an old question I know, but this is in the top five for several related Google searches. Here's the CSS-only solution without changing the images to background images:
这是我知道的一个老问题，但它在几个相关的 Google 搜索中排在前五名。这是仅使用 CSS 的解决方案，无需将图像更改为背景图像：
width: auto;
height: auto;
max-width: MaxSize;
max-height: MaxSize;
"MaxSize" is a placeholder for whatever max-widthand max-heightyou want to use, in pixels or percentage. autowill increase (or decrease) the width and height to occupy the space you specify with MaxSize. It will override any defaults for images you or the viewer's browser might have for images. I've found it's especially important on Android's Firefox. Pixels or percentages work for max size. With both the height and width set to auto, the aspect ratio of the original image will be retained.
“MAXSIZE”是任何一个占位符max-width，并max-height要使用，以像素为单位或百分比。auto将增加（或减少）宽度和高度以占用您使用 MaxSize 指定的空间。它将覆盖您或查看者的浏览器可能具有的图像的任何默认值。我发现它在 Android 的 Firefox 上尤其重要。像素或百分比适用于最大尺寸。高度和宽度都设置为 时auto，将保留原始图像的纵横比。
If you want to fill the space entirely and don't mind the image being larger than its original size, change the two max-widths to min-width: 100%- this will make them completely occupy their space and maintain aspect ratio. You can see an example of this with a Twitter profile's background image.
如果您想完全填充空间并且不介意图像大于其原始尺寸，请将两个max-widths更改为min-width: 100%- 这将使它们完全占据其空间并保持纵横比。您可以使用 Twitter 个人资料的背景图片查看此示例。
回答by Chathuranga
if you want both width and the height you can try
如果你想要宽度和高度，你可以尝试
background-size: cover !important;
but this wont distort the image but fill the div.
但这不会扭曲图像而是填充 div。
回答by Josh Werner
I believe this is the best way of doing it, I've tried it and it works very well.
我相信这是最好的方法，我已经尝试过并且效果很好。
#img {
object-fit: cover;
}
This is where I found it. Good luck!
这是我找到它的地方。祝你好运！
回答by Nikhil Rathod
It's very simple. Just Set width of img to 100%
这很简单。只需将 img 的宽度设置为 100%
回答by Moonis Abidi
Hope this will answer the age old problem (Without using CSS backgroundproperty)
希望这将回答古老的问题（不使用 CSS背景属性）
Html
html
<div class="card-cont">
<img src="demo.png" />
</div>
Css
css
.card-cont{
width:100%;
height:150px;
}
.card-cont img{
max-width: 100%;
min-width: 100%;
min-height: 150px;
}
回答by Flavio
I am using this, both smaller and large images:
我正在使用这个，小图像和大图像：
.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
回答by Blake
Several of these things did not work for me... however, this did. Might help someone else in the future. Here is the CSS:
其中有几件事对我不起作用……但是，确实如此。将来可能会帮助别人。这是CSS：
.img-area {
display: block;
padding: 0px 0 0 0px;
text-indent: 0;
width: 100%;
background-size: 100% 95%;
background-repeat: no-repeat;
background-image: url("https://yourimage.png");
}
回答by Stefan Bogaard
I use:
我用：
object-fit: cover;
-o-object-fit: cover;
适合对象：覆盖；
-o-object-fit：覆盖；
to place images in a container with a fixed height and width, this also works great for my sliders. It will however cut of parts of the image depending on it's.
将图像放置在具有固定高度和宽度的容器中，这也适用于我的滑块。然而，它会根据它的情况剪切图像的一部分。
回答by Stefan Bogaard
In a webpage where I wanted a in image to scale with browser size change and remain at the top, next to a fixed div, all I had to do was use a single CSS line: overflow:hidden;and it did the trick. The image scales perfectly.
在一个网页中，我想要一个 in 图像随着浏览器大小的变化而缩放并保持在顶部，在一个固定的 div 旁边，我所要做的就是使用一个 CSS 行：overflow:hidden;它做到了。图像缩放完美。
What is especially nice is that this is pure css and will work even if Javascript is turned off.
特别好的是这是纯 css，即使关闭 Javascript 也能工作。
CSS:
CSS：
#ImageContainerDiv {
overflow: hidden;
}
HTML:
HTML：
<div id="ImageContainerDiv">
<a href="URL goes here" target="_blank">
<img src="MapName.png" alt="Click to load map" />
</a>
</div>
