具有設定高度的響應式圖像設計

如果有人能幫助我處理響應圖像的小問題，具有設定高度的響應式圖像設計

我有一個高度，我希望我的形象是。 200像素和大約100％的容器寬度。這就產生了這樣的問題，即圖像被拉伸並且看起來不太好。如果我能以任何方式讓圖像保持其比例並保持好看，我就會變得更加生動。我是否可以在一定高度的周圍安裝一個容器，並使得溢出隱藏在頂部和底部的每一件事物之後，我如何以最簡單的方式做到這一點？

How the site looks atm

任何其他sugestions我怎麼能解決問題呢？

來源

2016-05-18 Johan H

請發佈您的代碼。 – super11

您可以使用'background-size：cover'。檢查此[**鏈接**]（https://css-tricks.com/almanac/properties/b/background-size/） – Pugazh

寬度：自動，高度：200px。保證金：0自動 –

你解決這個問題的方式是錯誤的。您不能對height和width都設置約束，並保持圖像的高寬比。

至於這種情況下，考慮這個CSS：

img { 
    height: 200px; 
    width: auto; 
}

來源

2016-05-18 07:52:12 activatedgeek

有一個叫background-size一個CSS屬性，該屬性我通常使用像這樣的情況。 background-size結合background-position可能是你在找什麼。下面的例子。

body { 
 
    margin: 0; 
 
    background-color: #CCCCCC; 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    margin: 15px auto; 
 
    padding: 15px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
.hero { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url('http://www.redcross.org/images/MEDIA_CustomProductCatalog/m17844381_TheHero_763x260_PRE.JPG'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="hero"></div> 
 
    <div class="content"> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
</div>

在我的例子中「英雄」形象是763x260px，它顯示在div容器是470x200px，但它仍然在它的容器中的「最佳途徑」相符。

來源

2016-05-18 07:52:42 thepio

您可以輕鬆地使用background-size:cover

來源

2016-05-18 08:41:33

具有設定高度的響應式圖像設計

回答

相關問題