當父div爲百分比時，保持圖像比例

Question

我試圖讓圖像跨越屏幕寬度並同時保持圖像比例。基本上，有4個圖像需要在屏幕寬度上均勻分佈，並且需要同時保持圖像比例，圖像之間沒有空間或填充。

我做了一個我試過的Codepen。

HTML：

<div class="featured-products"> 
    <ul> 
    <li> 
     <p> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     </p> 
    </li> 
    <li> 
     <p> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     </p> 
    </li> 
    <li> 
     <p> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     </p> 
    </li> 
    <li> 
     <p> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     <img src=" http://placehold.it/320x410" alt="" /> 
     </p> 
    </li> 
</ul> 
</div> 

LESS/CSS：

.featured-products { 
    width: 100%; 
    position: relative; 
    font-size: 0; 
    display: block; 
    ul { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     text-align: center; 
     li { 
      display: inline-block; 
      width: 25%; 
      p { 
       width: 100%; 
       height: auto; 
       img:nth-child(1){ 
        background-size: cover; 
        max-width: 100%; 
        max-height: 100%; 
       } 
       img:nth-child(2){ 
        display: none; 
       } 
      } 
     } 
    } 
} 

Answer 1

img { 
    width:100%; 
    height:auto; 
} 

應該做的伎倆。演示：http://codepen.io/anon/pen/RPzpeN?editors=110