使图像填充div完全没有拉伸 [英] Make image fill div completely without stretching

问题描述

我有不同尺寸的大图片，需要在两个维度中完全填充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为此？

编辑：清楚。我需要一切红色的小提琴走了。进入的图像是动态的，因此我不能使用背景图像。我可以使用JavaScript。谢谢！ ：）

解决方案

自动调整图片以适应div - 使CSS工作 >

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

  < div class =container portrait> 
< h4>肖像风格< / 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来选择正确的缩放。

此外，你没有简单的方法来定位图像，因为图像的左上角是

$ b 您可以使用以下jQuery操作来确定基于图像宽高比的
设置的类。

  $（。container）。each（function（）{
 //取消注释以下内容，如果你需要使这个动态
 // var refH = $（this）.height $ b // var refW = $（this）.width（）; 
 // var refRatio = refW / refH; 
 
 //硬编码值... 
 var refRatio = 240/300; 
 
 var imgH = $（this）.children（img）height（）; 
 var imgW = $（this）.children（img ）。宽度（）; 
 
 if（（imgW / imgH）< refRatio）{
 $（this）.addClass（portrait）; 
} else {
 $（this）.addClass（landscape）; 
} 
}）
  

< .container ，获取高度和宽度，测试 width< height ，然后设置适当的类。

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

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:

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

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?

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! :)

解决方案

Auto-sizing Images to Fit a Div - Making the CSS Work

Here is one way of doing it, start with the following HTML:

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

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

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.

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.

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

You can use the following jQuery action to determine which class to set based on the aspect ratio of the image.

$(".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<height and then set the appropriate class.

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.

这篇关于使图像填充div完全没有拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！