html - 当父 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>

更少/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