Question

我有各种尺寸的大图像需要在两个维度上完全填充240px×300px容器。这是我现在所得到的，仅适用于一个方面：

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。谢谢！：）

Answer 1

自动调整图像以适应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 Helper

您可以使用以下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，然后设置相应的类。

另外，我添加了一个检查以考虑包含块的宽高比。之前，我暗中假设了一个方形视图面板。

Answer 2

对于那些没有动态图像的人来说，这是一个使用背景图像的全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>

“background-size：cover”使图像缩放以覆盖所有div，同时保持纵横比。 CSS也可以移动到CSS文件。虽然它是动态生成的，但background-image属性必须保留在style属性中。

Answer 3

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

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

img {
height: auto;
}

您还可以添加＆gt;到你的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/

Answer 4

后台可以做到这一点

将图片设置为背景

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

Answer 5

你应该试试这个：

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

Answer 6

我使用这个插件来说明任何比例。它还需要imagesloaded插件才能工作。这对于需要这种处理的站点上的大量图像是有用的。也很容易启动。

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

Answer 7

如果将以下内容添加到父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;
}

Answer 8

这可以胜任：

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

img {
    width:240px;
    height:300px;
}

Answer 9

我们使用Angular应用程序使用上面的jQuery方法的变体。然后，我们一位聪明的同事提出了一种纯粹的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并设置容器也是如此。

Answer 10

我遇到了这个话题，因为我试图解决类似的问题。然后一个灯泡在我脑海中消失，我无法相信它有效，因为它非常简单明显。

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，从而切断多余的图像。没有麻烦没事。

Answer 11

将图像用作Div背景有许多缺点（比如缺少ALT for SEO）。而不是它，在图像标记样式中使用object-fit: cover;！

Answer 12

这是我发现的另一个解决方案，无需分离portraid或横向或脚本。

  <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/

Answer 13

如果您需要将img标签插入div标签，以下解决方案非常简短且干净：

＆＃13;

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}

＆＃13;

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>

＆＃13;

另外，如果你不需要使用div，你可以写一个更短的CSS：

 img
    {
        max-height: 300px;
        max-width: 240px;
    }

无需拉伸即可完全填充图像

13 个答案: