将图片调整为父div的大小 [英] Fit image to parent div's size

问题描述

我创建了一个div（div1），等于浏览器窗口大小。然后我又在父div（div1）里面做了另一个div（div2）。然后我把一个图像放在第二个div（div2）。我的浏览器窗口大小为1360X638，我的图片大小为1600 * 1200。

我想让图片根据父div（div1）的大小适合自己。因此，图像（大于窗口大小）必须适合第二个div（div2），这等于窗口大小），这个图像将恰好适合div的大小（所以，没有任何在显示器中滚动或裁剪图像）。

我搜索了一段时间。我发现的解决方案是将最大高度和宽度设置为100％。我这样做了。

我写了这部分：

  div style =max-width：100％; max-height：100％; background-color：red; margin-right：0px; padding：2 2 2 2; overflow：visible;> 
< div style =max-height：100％; max-width：100％;> 
< img style =max-width：100％; max-height：100％; overflow：visible; src =1.jpg/> 
< / div> 
< / div> 
  

输出如下：

您可以看到在右侧的滚动。我不想那样。

解决方案

jQuery解决方案 - 概念证明

假设您有以下 HTML ：

 < div class = > 
< img src =http://placehold.it/1600x1200/> 
< / div> 
  

您可以应用以下 CSS 视图端口（浏览器宽度或高度的100％）：

  html，body {
高度：100％; 
 margin：0; 
} 
 .container {
 height：100％; 
 width：100％; 
 background-color：red; 
 text-align：center; / * optional * / 
} 
 .container img {
 vertical-align：top; 
} 
 .portrait img {
 width：100％; 
} 
 
 .landscape img {
 height：100％; 
} 
  

使用以下 jQuery 方法CSS规则取决于视口的宽高比：

  function resizeImg（）{
 var thisImg = $（'。container'）; 
 var refH = thisImg.height（）; 
 var refW = thisImg.width（）; 
 var refRatio = refW / refH; 
 
 var imgH = thisImg.children（img）。height（）; 
 var imgW = thisImg.children（img）。width（）; 
 
 if（（imgW / imgH）> refRatio）{
 thisImg.addClass（portrait）; 
 thisImg.removeClass（landscape）; 
} else {
 thisImg.addClass（landscape）; 
 thisImg.removeClass（portrait）; 
} 
} 
 
 $（document）.ready（resizeImg（））
 
 $（window）.resize（function（）{
 resizeImg（）; 
}）; 
  

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

这可能不是整个答案，但可能是一个开始的地方。 p>

参考

我之前处理过相关问题，可能感兴趣：

< a href =http://stackoverflow.com/questions/16739908/make-image-fill-div-completely-without-stretching/16740542#16740542>完全使图像填充div无延伸

I have made a div (div1), which is equal to the browser window size. Then I have made another div (div2) inside the parent div (div1). Then I have placed an image inside the second div (div2). My browser window size is 1360X638 and my image size is 1600*1200.

I want the image to fit itself according to the parent div's (div1) size. So the image (which is larger than the window size) have to fit itself to the second div (div2), which is equal to window size), and this image will fit exactly to the div's size (so, there isn't any scrolling or cropping of image in the display).

I have searched for some time. The solution I found is to set the maximum height and width to 100%. I did this.

I wrote this part:

<div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;">
    <div style="max-height: 100%; max-width: 100%;">
        <img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" />
    </div>
</div>

The output is like this:

You can see there is a scroll in the right side. I don't want that there.

解决方案

jQuery Solution - Proof of Concept

Suppose you have the following HTML:

<div class="container">
    <img src="http://placehold.it/1600x1200" />
</div>

You can apply the following CSS rules to size an image to fit the view port (100% of browser width or height):

html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
    width: 100%;
    background-color: red;
    text-align: center; /* optional */
}
.container img {
    vertical-align: top;
}
.portrait img {
    width: 100%;
}

.landscape img {
    height: 100%;
}

Use the following jQuery method to pick the correct CSS rule depending on the aspect ratio of the view port:

function resizeImg() {
    var thisImg= $('.container');
    var refH = thisImg.height();
    var refW = thisImg.width();
    var refRatio = refW/refH;

    var imgH = thisImg.children("img").height();
    var imgW = thisImg.children("img").width();

    if ( (imgW/imgH) > refRatio ) { 
        thisImg.addClass("portrait");
        thisImg.removeClass("landscape");
    } else {
        thisImg.addClass("landscape");
        thisImg.removeClass("portrait");
    }
}

$(document).ready(resizeImg())

$(window).resize(function(){
    resizeImg();
});

Demo fiddle: http://jsfiddle.net/audetwebdesign/y2L3Q/

This may not be the entire answer but it may be a place to start.

Reference
I worked on a related problem earlier, which may be of interest:
Make image fill div completely without stretching

这篇关于将图片调整为父div的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！