设置背景图片的宽度100％的高度自动

我有一个标题部分这样：设置背景图片的宽度100％的高度自动

.bannerImage { 
 
    width: 100%; 
 
    height: auto; 
 
}

<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" />

因此，而不是使用背景图片，我使用的图像与width100%和heightauto 。

现在我想在横幅部分添加横幅标题。所以，由于无法通过图像实现效果，因此我现在使用background-image属性。但是对于背景图片，我想要像图片一样的布局。背景应始终宽度为100％，高度应为自动。以下是我的方法。正如你可以看到该部分调整到内容的高度。是否可以将其高度设置为图像的高度？

.bg_banner_image { 
 
    background-size: 100% auto; 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')">some content here</div>

来源

2016-11-10 Mark Wilson

容器是空的，所以为什么容器从背景图像带高度，如果你需要容器的同一高度的背景图片，那么你必须给他们高度等副放一些内容在侧容器 –

我希望容器取得背景图片的高度而不是其中的内容 –

添加图像内并使其隐藏（通过使用opacity:0;）。所以它会适合

.bg_banner_image { 
 
    background-size: 100% auto; 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
} 
 
.bannerImage { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity:0; 
 
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')"> 
 
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" /> 
 
</div>

来源

2016-11-10 05:47:49 jafarbtech

你可以试试这个。假元素:after由于其padding将给父母height。

.bg_banner_image { 
 
    background-size: 100% auto; 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
} 
 
.bg_banner_image::after { 
 
    content: ''; 
 
    display:block; 
 
    padding: 15%; 
 
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')"></div>

来源

2016-11-10 05:45:53

容器仅显示填充15％ –

.bg_banner_image { 
 
    height: auto; 
 
    background-size: 100% auto; 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
    position:relative; 
 
} 
 
.bg_banner_image img { 
 
    visibility: hidden; 
 
} 
 
.content { 
 
    position: absolute; 
 
    top:0; 
 
    color: white; 
 
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')"> 
 
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" /> 
 
<div class="content"> 
 
    SOME BANNER CONTENTS 
 
</div> 
 
</div>

来源

2016-11-10 05:56:44 GvM

如果想坚持的背景图像。 Javascript是需要的，在我看来，请查看这一个。

var x = document.getElementsByClassName('bg_banner_image')[0], 
 
    y = x.style.backgroundImage; 
 

 
function imgSize(url) { 
 
    var img = new Image(), 
 
    /*in case url passed is in url(blablabla)*/ 
 
    rege = /^url\(['"](http[s]?:\/\/.*)['"]\)/, 
 
    url = rege.test(url) ? url.match(rege)[1] : url; 
 

 
    var p = new Promise(function(res, rej) { 
 
    img.onload = function(e) { 
 
     res({ /*return height and width of original image*/ 
 
     height: e.target.naturalHeight + "px", 
 
     width: e.target.naturalWidth + "px" 
 
     }); 
 
    } 
 
    img.onerror = function(e) { 
 
     rej("error"); 
 
    } 
 
    img.src = url; 
 
    }); 
 
    return p; 
 
}; 
 

 
/*trying to get original image width and height then change the height of div*/ 
 
imgSize(y).then(function(o) { 
 
    x.style.height = o.height; 
 
}, function(err) { 
 
    console.log(err, "dunno") 
 
});

.bg_banner_image { 
 
    background-size: 100% auto; 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')">some content here</div> 
 

 
<!--for comparison only--> 
 
<img src="http://www.w3schools.com/css/trolltunga.jpg" width="100%" height="auto">

来源

2016-11-10 11:08:27 RizkiDPrast

设置背景图片的宽度100％的高度自动

回答

相关问题