Html 将图像适配到父div';s码
我制作了一个div(div1),它等于浏览器窗口的大小。然后我在父div(div1)中创建了另一个div(div2)。然后我在第二个div(div2)中放置了一个图像。我的浏览器窗口大小为1360X638,图像大小为1600*1200 我希望图像能够根据父div(div1)的大小进行调整。因此,图像(大于窗口大小)必须适合第二个div(div2,等于窗口大小),并且此图像将完全适合div的大小(因此,显示屏中没有任何滚动或裁剪图像) 我已经找了一段时间了。我找到的解决方案是将最大高度和宽度设置为100%。是我干的 我写了这部分:Html 将图像适配到父div';s码,html,css,Html,Css,我制作了一个div(div1),它等于浏览器窗口的大小。然后我在父div(div1)中创建了另一个div(div2)。然后我在第二个div(div2)中放置了一个图像。我的浏览器窗口大小为1360X638,图像大小为1600*1200 我希望图像能够根据父div(div1)的大小进行调整。因此,图像(大于窗口大小)必须适合第二个div(div2,等于窗口大小),并且此图像将完全适合div的大小(因此,显示屏中没有任何滚动或裁剪图像) 我已经找了一段时间了。我找到的解决方案是将最大高度和宽度设置为
<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="container">
<img src="http://placehold.it/1600x1200" />
</div>
根据视图端口的纵横比,使用以下jQuery方法选择正确的CSS规则:
函数resizeImg(){
var thisImg=$('.container');
var refH=此img.height();
var refW=thisImg.width();
变量refRatio=refW/refH;
var imgH=此img.儿童(“img”).身高();
var imgW=此img.children(“img”).width();
如果((imgW/imgH)>refRatio){
此img.addClass(“肖像”);
此img.removeClass(“景观”);
}否则{
此img.addClass(“景观”);
此img.removeClass(“肖像”);
}
}
$(文档).ready(resizeImg())
$(窗口)。调整大小(函数(){
resizeImg();
});
演示小提琴:
这可能不是全部答案,但可能是一个起点
参考我之前研究过一个相关的问题,这可能很有趣:
这看起来像一个dup:@hendr1x,该链接没有任何可接受的答案。您是否通过“背景尺寸:封面”进行了检查;请看下面的示例,这里有一个基本问题。图像的纵横比可能与视口(浏览器窗口)的纵横比不同。在某些情况下,如果视口比图像高,则需要使用“最大宽度”;如果视口比图像宽,则需要使用“最大高度”。您需要一些JavaScript/jQuery来帮助您在调整窗口大小时设置正确的样式。@MarcAudet:谢谢!你的回答很有帮助。您已解锁一个新的视角。:)