Bootstrap響應標題圖像收縮/消失

-2

我試圖製作一個響應標題不同部分，headerright，headercenter，headerleft等與不同的內容。Bootstrap響應標題圖像收縮/消失

我已經設法將圖像添加到標題中，但是如果我縮小頁面或在移動瀏覽器上查看它，它會縮小到圖片的一個小點或完全消失。

這是我的HTML/CSS代碼：www.jsfiddle.net/9118jw4s雖然預覽不會幫助，因爲它只顯示全尺寸圖像。

有人可以幫助或鏈接我的教程如何使標題，它的圖像響應w/bootstrap，謝謝。

來源

2016-03-02 Jwk895

我想我可能已經通過向CSS添加最小寬度來解決問題了 – Jwk895

從我看到你的＃header-container有填充設置，可以縮小圖像，每當重新調整大小。試試這個。

#header-container { 
    margin:auto; 
    }

或

#header-container { 
    padding-left:15%; 
    padding-right:15%; 
    }

我還看到一個錯字在你.headerleft =「心寬」

主要是我將銘記使用像素作爲填充大小。嘗試百分比。希望這可以幫助！

來源

2016-03-02 16:36:12 andnowchris

沒有看到錯字，謝謝！ – Jwk895

沒問題！希望你能工作！ – andnowchris

引導有響應圖像類「.IMG響應」 ......

.headerbox { 
 
    height: 200px; 
 
    width: 100%; 
 
    background-color: white; 
 
} 
 

 
#header-container { 
 
    padding-left: 140px; 
 
    padding-right: 140px; 
 
} 
 

 
.headerdiv { 
 
    height: 200px; 
 
    width: 100%; 
 
    padding-top: 17px; 
 
    padding-bottom: 17px; 
 
    padding-left: 65px; 
 
    padding-right: 65px; 
 
} 
 

 
.headerleft { 
 
    height: 146px; 
 
    min-width: 50%; 
 
    width: 50%; 
 
    float: left; 
 
    padding-right: 15px; 
 
    background-position: center left; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="header"> 
 
    <div id="header-container" class="container"> 
 
    <div class="headerdiv"> 
 
     <a href="" class="headerleft"> 
 
     <img src="http://s7.postimg.org/ixxfw8n5n/header_logo.jpg" class="img-responsive" alt="header SUSU logo"> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 
</div>

來源

2016-03-02 16:36:15

抱歉，我忘記提及我正在使用使用「.img-fluid」的bootstrap4 alpha，我相信。不過，我已經解決了我的問題，但感謝您的幫助。 – Jwk895

和img類沒有「=」 –

你可以嘗試將身體的背景圖像。

body { 
     background: url(background.jpg) no-repeat; 
     width: 100%; 
     height: 100%; 
     background-size: contain; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-position: top; 
     background-size: auto;   
    }

它會變成響應式。

來源

2016-03-02 18:33:54 bjesua

Bootstrap響應標題圖像收縮/消失

回答

相關問題