無法響應地縮小超過一定大小的圖像與CSS

Question

我有三個圖像在一個元素內部彼此相鄰放置，我試圖用CSS縮小它們。

<main> 
    <img src="img1.png" alt="logo1" /> 
    <img src="img2.png" alt="logo2" /> 
    <img src="img3.png" alt="logo3" /> 
</main> 

到目前爲止，我已經設法通過其寬度和高度設置爲VH和VW的比例縮小他們（VH當方向是縱向和大衆當方向爲橫向）。

@media screen and (orientation: portrait) { 
    main img { 
     width: 25vh; 
     height: 25vh; 
    } 
} 
@media screen and (orientation: landscape) { 
    main img { 
     width: 25vw; 
     height: 25vw; 
    } 
} 

我發現了什麼令人沮喪，不過，是當視域的寬度小於一定寬度（根據視口的高度，太），圖像再也不會縮水，只是將自己定位低於其他。

我如何將它們縮小到最小尺寸，以便佈局不會改變？

Answer 1

只需使用percentages代替vh和vw並刪除媒體查詢：

width: 25%; 

Answer 2

HTML

<main> 
    <img src="http://i.imgur.com/60PVLis.png" alt="logo1"> 
    <img src="http://i.imgur.com/60PVLis.png" alt="logo2"> 
    <img src="http://i.imgur.com/60PVLis.png" alt="logo3"> 
</main> 

CSS

img { width: 30%; } 

DEMO：http://jsfiddle.net/6krx9bte/

注：

• 你可能不需要媒體查詢的圖像尺寸調整，當您使用百分比值。
• The <main> element is not supported by Internet Explorer。考慮將每個<img>包裝在一個<figure>元素中，並將該組包裝在<div>,<article>或其他適合該上下文的元素中。