首页 文章

绝对定位DIV的宽度不会根据子图像调整大小

提问于
浏览 1387
1

我有一个绝对定位的div,其中有一个百分比高度和一个图像 . 该图像的高度为100%,宽度为auto . 当调整视口的高度时,绝对div将不会调整其宽度,图像将被切断,或者您将看到div的背景 .

示例:http://jsfiddle.net/Y5Cr7/

CSS

div {
    position: absolute;
    overflow: hidden;
    height: 50%;
    bottom: 80px;
    left: 5%;
    background: blue;    
}

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

HTML

<p>adjust the height of the viewport</p>

<div>
    <img src="http://lorempixel.com/400/200" />
</div>

1 回答

  • 0

    div 's width won't对应于其高度的任何变化,与img不同(此外,div的隐式宽度现在对应于视口的宽度) .

    我在这看到两个选择......

    • 媒体查询

    • JavaScript

    库(如jQuery)可能是你最好的选择(这里是jsfiddle):

    $(window).resize(function() {
    
        var imgWidth = $('img').outerWidth();
    
        $('div').css({
            'width':imgWidth
        });
    
    });
    

相关问题