logo标签列表

使图像充满整个div而不拉伸

javascripthtmlcssimage
26

我有不同尺寸的大图片需要在240像素乘以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吗？

编辑：明确说明。我需要在fiddle上去掉所有红色部分。输入的图片是动态的，因此我不能使用background-images。我可以使用JavaScript。谢谢！ :)

不确定跨浏览器支持 - http://jsfiddle.net/HsE6H/2/ - Ruslan Polutsygan
1
如果您想将“尺寸不同的大图像”完美地适配到固定尺寸的容器中，而不对两个轴进行分别缩放，则无法实现。如果您按比例缩放图像，则源图像的比例将与目标图像相同。 - Blaise Swanwick
就像 Blaise Swanwick 所说，仅通过 css 是不可能的，您需要使用一些服务器端代码和图像处理库来调整图像大小。 - The Alpha
听起来你正在寻找 object-fit 属性，但只有一个浏览器支持它: http://dev.opera.com/articles/view/css3-object-fit-object-position/ - cimmanon
这个对你没用吗？http://jsfiddle.net/HsE6H/181/ 裁剪的图片太宽或太高了。 - G-Cyrillus
显示剩余3条评论
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 ，然后设置适当的类名。
我还添加了一个检查来考虑包含块的纵横比。之前，我默认假设是正方形视图面板。
嗨。谢谢，这个工作得非常好 - 解释也很好！ - Lennart
很高兴能帮忙！如果需要，您可以美化jQuery以使图像居中。 - Marc Audet
然而，div的尺寸为240x300，因此如果图像的尺寸为250x300，则简单的imgW < imgH无法正常工作。在这种情况下，它应该是横向的，但已经被处理为纵向图像。有没有办法在JS中包含4:5的比例？ - Lennart
1
我扩展了jQuery代码以考虑视图面板的纵横比。 - Marc Audet
@用户，其中一张图片损坏了，这是您看到的问题吗？ - Marc Audet
如果使用这种方法，请确保您的img没有设置max-width。 - MarcGuay
5

对于没有动态图片的人，以下是一种使用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>

"background-size: cover" 会让图片按比例缩放以覆盖整个 div。CSS 也可以移动到 CSS 文件中，但如果是动态生成的，则 background-image 属性必须保留在 style 属性中。
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/

是的，那些占位图像有点误导人。这只是使图像全尺寸，而我希望它们尽可能小，同时仍然填满整个容器。 - Lennart
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/

1
正是我正在寻找的解决方案。可惜它并没有回答上面的问题。我认为他们想要完全填充容器，即使图像的一部分被裁剪掉。因此，蓝色区域不应该可见。 - jumxozizi
@Rubiksmomo 抱歉，我刚刚解决了自己的问题，你是对的。问题不同，但是这段代码也适用于其他情况...谢谢。 - efirat
2
如果您将以下内容添加到img样式的父div中，它将起作用： 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;
}
2

你应该尝试这个：

img {
    min-width:100%;
    min-height:100%;
}
这对于短期修复很好，但大型图像无法适当缩小。 - byxor
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;
}
1
谢谢您先生！我简直不敢相信没有人点赞这个.. 这是一个测试：https://jsfiddle.net/yrrncees/8/ - Alex
值得注意的是，在使用此解决方案时，为了可访问性，最好在 div 中包含一个隐藏版本的图像。这样，您可以设置 alt 标签，并且禁用 CSS 的用户仍然可以查看网站并查看图像。如果这样做，最好避免使用 display: none，因为一些屏幕阅读器会跳过具有这些样式的元素。 - kravse
仅作为一个注释，截至2017年9月，背景图像不会被打印出来，在Chrome浏览器中，您可以设置样式以使它们打印出来，但在其他浏览器中则不行。 - Robin Luiten
2
0

我们在使用Angular应用程序时采用了上述jQuery方法的变体。 然后，我们中的一位聪明的同事想出了一种纯CSS方法。 请参见此处的示例：https://jsfiddle.net/jeffturner/yrrncees/1/。

基本上，使用line-height解决了我们的问题。 对于不想要访问 fiddle 的人来说，代码片段如下：

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

关键在于使用行高并将容器设置为相同。

OP（实际上包括我在内）正在寻找一种解决方案，使图像填充div而不留下背景空白。不幸的是，这并不能做到。 - Daryl Teo
0

这个可以完成任务：

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

img {
    width:240px;
    height:300px;
}
不行，它会改变比例。 - Lennart
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接