爲不同的桌面和移動視圖調整圖像大小

Question

我有一個結構，在這兩個視圖中，只有桌面視圖和移動視圖分別具有固定高度的圖像。

在移動視點圖像出來拉伸。 我已經應用了一些解決方案，從上，下，左，右裁剪圖像，在我的情況下，我不想要。 我應該如何繼續，以便圖像不會在任何視圖中伸展？

Answer 1

假設你想有一個固定的佈局（如你的圖像中），你可以使用background-image/background-size，並設置它像這樣

background: url(...) no-repeat;  /* the shorthand property */ 
background-size: cover; 
background-position: center center; 

的cover值使圖像總是充滿元件，而不將其拉伸，並與background-position可以控制圖像是否應居中，左，右，底部，頂部對齊

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/300/400/animals/4) no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    border: 1px solid black; 
 
} 
 
div ~ div { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
div ~ div ~ div { 
 
    height: 500px; 
 
    width: 200px; 
 
    background-position: left center; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

如果您不想裁剪，則可以使用background-size: contain代替。

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/300/400/animals/4) no-repeat; 
 
    background-size: contain; 
 
    background-position: left bottom; 
 
    border: 1px solid black; 
 
} 
 
div ~ div { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
div ~ div ~ div { 
 
    height: 500px; 
 
    width: 200px; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

更新基於評論，在與背景尺寸的img

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
img { 
 
    height: 40%; 
 
    width: auto; 
 
}

<img src="http://lorempixel.com/200/400/animals/4" alt=""> 
 
<img src="http://lorempixel.com/300/300/animals/4" alt=""> 
 
<img src="http://lorempixel.com/400/200/animals/4" alt="">