Bootstrap3：使用固定Hight的響應式圖像應放大。

我想爲我的網站製作響應式標題。很明顯，我使用了引導類.img-responsive。我的問題是，當屏幕變大時，高度也會增加，因爲height: auto。
因此，在普通的桌面屏幕上，圖片對我來說太大了。我看過一些網站，圖片的寬度爲100％，但是高度固定。如果寬度改變，圖片放大或平移。這是我的意思是example。
我在網上搜索資源，但什麼也沒找到。你們能幫助我嗎？Bootstrap3：使用固定Hight的響應式圖像應放大。

提前致謝！

來源

2017-04-26 Alexander Pilz

你可以發佈你到目前爲止嘗試過的代碼嗎？這應該是一個設置最小高度的問題。 – ZimSystem

你想要做的是將圖像設置爲div的'background-image'。將div的高度設置爲你想要的寬度，寬度爲100％，然後爲'background-size：cover'添加一個'background-image';' – APAD1

更像是一個'max-width'問題，設置'max-寬度「到img。 –

擴大對我的評論上面，如果你想要的圖像根據屏幕尺寸，同時保持相同的高度規模化，使用background-image性的元素上定義的高度：

.hero { 
 
    width:100%; 
 
    height:300px; 
 
    background-image:url('https://placeimg.com/1000/450/nature'); 
 
    background-size:cover; 
 
}

<div class="hero"></div>

如果你不快樂與其中圖像裁剪，您可以使用background-position進行調整：

.hero { 
 
    width:100%; 
 
    height:300px; 
 
    background-image:url('https://placeimg.com/1000/450/nature'); 
 
    background-position:center center; 
 
    background-size:cover; 
 
}

<div class="hero"></div>

來源

2017-04-26 20:51:57 APAD1

有了這個固定的高度，它不能反應 – blecaf

@blecaf確定它可以，這是在我的例子。如果OP希望高度也能作出響應，他們只需要爲各個斷點定義不同的高度。 – APAD1

請解釋downvote，我的答案確實是OP所要求的（甚至使用與他們提供的示例相同的方法）。 – APAD1

Bootstrap3：使用固定Hight的響應式圖像應放大。

回答

相關問題