設置背景圖片的寬度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％的高度自動

回答

相關問題