Html 使图像完全填充div而不拉伸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16739908/
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
Make image fill div completely without stretching
提问by Lennart
I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
我有不同尺寸的大图像，需要在两个尺寸上完全填充 240 像素 x 300 像素的容器。这是我现在得到的，仅适用于一维：
HTML
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
比例应该保持不变。本质上，宽图像应该在宽度上被切断，而高图像需要在高度上被切断。因此，只需根据需要放大以填充容器。
Not sure why I can't get it to work, do I need JavaScript for this?
不知道为什么我不能让它工作，我需要 JavaScript 吗？
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)
编辑：要清楚。我需要小提琴上的所有红色都消失了。进来的图像是动态的，因此我不能使用背景图像。我愿意使用 JavaScript。谢谢！:)
回答by Marc Audet
Auto-sizing Images to Fit a Div - Making the CSS Work
自动调整图像大小以适合 Div - 使 CSS 工作
Here is one way of doing it, start with the following HTML:
这是一种方法，从以下 HTML 开始：
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
和 CSS：
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
和演示小提琴：http: //jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
当您将图像定向为纵向时，您需要将宽度缩放到 100%。相反，当图像为横向时，您需要缩放高度。
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
不幸的是，CSS 中没有针对图像纵横比的选择器组合，因此您无法使用 CSS 来选择正确的缩放比例。
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
此外，由于图像的左上角固定在包含块的左上角，因此您无法轻松地将图像居中。
jQuery Helper
jQuery 助手
You can use the following jQuery action to determine which class to set based on the aspect ratio of the image.
您可以使用以下 jQuery 操作根据图像的纵横比确定要设置的类。
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<heightand then set the appropriate class.
对于 中的每个图像.container，获取高度和宽度，测试是否width<height然后设置适当的类。
Also, I added a check to take into account the aspect ratio of the containing block. Before, I had implicitly assumed a square view panel.
此外，我添加了一个检查以考虑包含块的纵横比。之前，我隐含地假设了一个方形视图面板。
回答by BurningLights
For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
对于没有动态图像的任何人来说，这里有一个使用 background-image 的全 CSS 解决方案。
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.
"background-size: cover" 使图像缩放以覆盖所有 div，同时保持纵横比。CSS 也可以移动到 CSS 文件中。尽管如果它是动态生成的，则 background-image 属性将必须保留在 style 属性中。
回答by Jcpopp
Taking out the line: max-width:100% in your CSS file seems to do the trick.
在 CSS 文件中取出一行：max-width:100% 似乎可以解决问题。
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
您也可以将 > 添加到 HTML 文件中的结束 div 可以使代码更整洁。
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/
这是一个有效的 JSFiddle 链接：http: //jsfiddle.net/HsE6H/19/
回答by comonitos
Background can do this
后台可以这样做
- set image as background
- 将图像设置为背景
2.
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
或者
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by user3710425
You should try this:
你应该试试这个：
img {
min-width:100%;
min-height:100%;
}
回答by racemic
I used this plugin that accounts for any ratio. It also requires imagesloadedplugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
我使用了这个插件，可以考虑任何比例。它还需要imagesloaded插件才能工作。这对于需要这种处理的站点上的大量图像非常有用。启动也很简单。
回答by CodingSince007
It works if you add the following to the parent div for img styling; https://jsfiddle.net/yrrncees/10/
如果您将以下内容添加到父 div 以进行 img 样式，它会起作用； https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
回答by efirat
Here is another solution I found, that no need to seperate portraid or landscape or scripting.
这是我发现的另一个解决方案，不需要单独的肖像或风景或脚本。
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
在这里，它运行良好......
回答by willy wonka
The following solution is very short and clean if you need to insert img tag into div tag:
如果您需要将 img 标签插入到 div 标签中，以下解决方案非常简短和干净：
.container, .container img
{
max-height: 300px;
max-width: 240px;
}Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>Also, if you don't need to use a div you can just write an even shorter css:
另外，如果您不需要使用 div，您可以编写一个更短的 css：
img
{
max-height: 300px;
max-width: 240px;
}
回答by SAST
This could do the job:
这可以完成这项工作：
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}
