Question

我有以下CSS代码，可以很好地将图像放到容器中，同时保持图像大小比例。

img { /* ASSUMING THE IMAGE IS WIDER THAN 150PX OR HIGHER THAN 100PX */
    max-height: 100%;
    max-width: 100%;
}
div.mydiv1 {
    width: 150px;
    height: 100px;
    background-color:red;
}

然而，如果图像比容器更短和更窄，它确实伸展到适合（保持尺寸比）。有没有办法做到这一点？

这里有一个小提琴...... http://jsfiddle.net/many_tentacles/uz3e7/

Answer 1

您可能会发现使用css属性img和background: url('path/to/img') no-repeat ...

可以更轻松地实现所需的功能，而不是使用background-size: contain标记

例如在css

中

div.mydiv3 {
    width: 300px;
    height: 70px;
    background-color:red;
    background: url("http://cdn-careers.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png") no-repeat red;
    background-size: contain;
}

和HTML

<div class="mydiv3"></div>

我更新了你的小提琴。 http://jsfiddle.net/uz3e7/4/

Answer 2

我认为你最接近的是将高度或宽度（你想要数学容器的数量）设置为100％而将另一个设置为auto。添加溢出：隐藏;容器将使图像不会重叠。也就是说：

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

请参阅this fiddle了解我的意思。我也同意cpreid，你似乎要问的是不可能的。并非不改变父容器的大小/形状。

Answer 3

你需要一些javascript才能做到这一点，

看看这个sample

<强>的Javascript

$("img").each(function(){    
    var real_width = $(this).width();
    var real_height = $(this).height();
    var parentwidth = $(this).parent().width();
    var parentheight = $(this).parent().height();

    var ratioParent = parentwidth / parentheight;
    var ratio = real_width / real_height;    
    var max_width = $(this).css("max-width");
    if (ratioParent < ratio) {        
        $(this).css({width: "100%", height: 'auto'});
    }else{
        $(this).css({width: "auto", height: '100%'});
    }
});

Answer 4

在object-fit: cover元素上使用<img>：

img { object-fit: cover; }

Answer 5

您不能简单地将宽度设置为100％吗？

另外：一些img不可能放大并适合容器，边缘到边缘，同时保证它的比例得以保留。

Answer 6

是你想要的吗？ http://jsfiddle.net/uz3e7/2/

img {
height: auto;
width: 100%;
display:block;
 }

Answer 7

我不确定我是否理解您的问题，但尝试使用最小宽度和最小高度来为您的图像提供最小尺寸。

当图像小于容器时，CSS将图像适合容器

7 个答案: