的div元素响应高度

我有一个负责任的旗帜的div元素响应高度

.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元素成为680像素

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

从这个例子没有与background_image高度不同的值mybannder高度，所以它已经成为难看的空白

我已经尝试修改它这样，使.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的高度改变，这取决于他的背景上的图像大小

来源

2014-10-02 Neversaysblack

我明白英语不是你的语言，但很难理解你的意思，可能是因为我们不知道.mybanner类是什么。这是一个图像？一个div？一个p？别的东西？请记住随时添加您的标记，因为您的身高正在变化。你看到（或看不到）是一个完全不同的故事，它的基础是标记。顺便说一下，如果我不得不打赌，我会建议将背景大小从'100％'更改为'cover' – Devin 2014-10-02 05:15:13

@fabio sory如果我描述它不清楚..... mybanner是一个div元素，我使用'背景大小= 100％'，因为我想根据屏幕调整我的背景图像在..mybanner .....如果我使用'背景大小：封面'不会显示一个完整的图像，当屏幕小...我的情况需要完整的形象来显示，所以我选择100％，而不是覆盖） – Neversaysblack 2014-10-02 06:17:52

您可以使用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和图像高度，它会自动计算。

来源

2014-10-02 06:32:31 Martin

hm ...我认为问题不是在背景大小属性....我可以使用background-size：包含，但它是给我与background-size：100％相同的结果，因为mybanner div class的高度是320px ....如果我使用mybanner类的'auto'或'100％'高度横幅不见了（当然是因为mybanner don' t有高度，没有任何内容只是背景） – Neversaysblack 2014-10-02 06:45:58

我根据自己的背景，需要div .mybanner的高度，具体取决于他背景上的图像大小，编辑过回答 – Martin 2014-10-02 06:47:19

你是对的，如果我把IMG作为对象而不是背景将被解决...但在上面的图像我会把相同的输入文本，所以我认为不适合我的情况...无论如何，当我尝试使用该js代码...我调整了大小，mybanner不见了它看起来像mybanner.div.style成为0 – Neversaysblack 2014-10-02 06:56:34

的div元素响应高度

回答

相关问题