25

我有不同尺寸的大图像，需要在两个维度上完全填充 240 像素 x 300 像素的容器。这是我现在得到的，仅适用于一维：

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
max-width: 100%;
height: auto;
}

比例应该保持不变。本质上，宽图像应该在宽度上被切断，而高图像需要在高度上被切断。因此，只需放大填充容器所需的量即可。

不知道为什么我不能让它工作，我需要 JavaScript 吗？

编辑：要清楚。我需要小提琴上的所有红色都消失了。进来的图像是动态的，因此我不能使用背景图像。我愿意使用 JavaScript。谢谢！:)

4

13 回答 13

43

自动调整图像大小以适应 div - 使 CSS 工作

这是一种方法，从以下 HTML 开始：

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

和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%;
}

和演示小提琴：http: //jsfiddle.net/audetwebdesign/QEpJH/

当您将图像定向为纵向时，您需要将宽度缩放到 100%。相反，当图像是横向时，您需要缩放高度。

不幸的是，CSS 中没有针对图像纵横比的选择器组合，因此您无法使用 CSS 来选择正确的缩放比例。

此外，由于图像的左上角固定在包含块的左上角，因此您没有简单的方法使图像居中。

jQuery 助手

您可以使用以下 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");
    }
})

对于 中的每个图像.container，获取高度和宽度，测试是否width<height然后设置适当的类。

另外，我添加了一个检查以考虑包含块的纵横比。之前，我隐含地假设了一个方形视图面板。

于 2013-05-24T17:27:53.120 回答
5

对于任何想要这样做但没有动态图像的人，这里有一个使用背景图像的全 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>

“背景尺寸：覆盖”使得图像可以缩放以覆盖所有 div，同时保持纵横比。CSS 也可以移动到 CSS 文件中。尽管如果它是动态生成的，那么 background-image 属性将必须保留在 style 属性中。

于 2015-05-21T12:35:39.690 回答
3

取出 CSS 文件中的行：max-width:100% 似乎可以解决问题。

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

您也可以在 HTML 文件中将 > 添加到您的关闭 div 可以使代码更整洁。

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

这是一个有效的 JSFiddle 链接：http: //jsfiddle.net/HsE6H/19/

于 2013-05-24T17:00:24.423 回答
3

这是我发现的另一个解决方案，不需要单独的肖像、风景或脚本。

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

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

在这里，它运作良好......

https://jsfiddle.net/efirat/17bopn2q/2/

于 2017-01-27T14:09:16.367 回答
2

你应该试试这个：

img {
    min-width:100%;
    min-height:100%;
}
于 2014-06-05T09:21:57.377 回答
2

我使用了这个占任何比例的插件。它还需要加载图像的插件才能工作。这对于需要这种处理的站点上的大量图像很有用。启动也很简单。

https://github.com/johnpolacek/imagefill.js/

于 2015-01-22T10:59:33.267 回答
2

后台可以这样做

  1. 将图像设置为背景

2.

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

或者

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2014-04-30T15:59:56.123 回答
2

如果您将以下内容添加到父 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;
}
于 2016-08-01T16:42:55.877 回答
0

这可以完成这项工作：

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}
于 2013-05-24T17:03:28.780 回答
0

我们通过使用上述 jQuery 方法的变体的 Angular 应用程序走上了这条路。然后我们的一位聪明的同事提出了一种纯 CSS 方法。在此处查看此示例：https ://jsfiddle.net/jeffturner/yrrncees/1/ 。

基本上使用 line-height 为我们解决了这个问题。对于那些不想打小提琴的人，代码片段是：

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

关键是使用 line-height 并设置容器来做同样的事情。

于 2015-06-09T23:14:16.327 回答
0

使用图像作为 Div 背景有很多缺点（比如缺少 SEO 的 ALT）。取而代之的是，object-fit: cover;在图像标签样式中使用！

于 2016-05-03T16:56:28.420 回答
0

如果您需要将 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>

此外，如果您不需要使用 div，您可以编写更短的 css：

 img
    {
        max-height: 300px;
        max-width: 240px;
    }
于 2017-04-02T04:22:50.290 回答
0

我遇到了这个话题，因为我试图解决一个类似的问题。然后一个灯泡在我脑海里亮了，我不敢相信它起作用了，因为它是如此简单和如此明显。

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
min-width:100%;
min-height:100%;
}

只需将 min-width 和 min-height 设置为 100%，它就会自动调整大小以适应 div，切断多余的图像。不吵不闹。

于 2015-08-20T04:37:33.390 回答