Question

我有一个响应式横幅的代码

.mybanner { 
     height:320px; 
     background:url(../img/banner.png) no-repeat;  
     background-size:100%;
}

响应式图像背景工作正常，唯一的问题是.mybanner容器的高度没有变化

例如当我用大屏幕测试时

mybanner div element width = 980px
mybanner div element height = 320px
bakcground_image width = 980px
background_image height = 320px

但是当我调整屏幕大小时，让我说宽度mybanner div元素变为680px

mybanner div element width = 680px
mybanner div element height = 320px
bakcground_image width = 680px
background_image height = 220px

从那个例子中可以看出mybannder高度与background_image高度不同，所以它变成了丑陋的白色空间

我已经尝试过像这样修改它，使.mybanner高度成为自动

 .mybanner { 
     min-height:170px;
     max-height:320px; 
     background:url(../img/banner.png) no-repeat;  
     background-size:100%;
}

或者这个：

.mybanner { 
     height:100%; 
     //height:auto;
     background:url(../img/banner.png) no-repeat;  
     background-size:100%;
}

但不行....... 任何想法如何使div .mybanner的高度也根据他背景上的图像大小而改变

Answer 1

您可以使用javascript更改身高。

<body onresize="resizediv()">
<div class="mybanner" id="mybanner">
...

<script>
function resizediv() {
div = document.getElementById('mybanner');
    var imageSrc = div.style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];

    var image = new Image();
    image.src = imageSrc;

    var width = image.width,
        height = image.height;

    div.style.height = image.height; 

}
</script>

或者有所有背景大小有效属性，您可以选择最佳属性：

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

或者简单地不使用背景，将IMG作为对象放入div并设置图像宽度100％不要编辑div和图像高度，它将自动计算。

div元素的响应高度

1 个答案: