Html 当父div为百分比时保持图像比率

我试图让图像跨越屏幕的宽度，同时保持它们的图像比例。基本上，有4个图像需要在屏幕宽度上均匀分布，并且需要同时保持图像比率，图像之间没有空间或填充

我对我所做的努力作了充分的评价

HTML:

---

我们应该做到这一点。演示：

您可以控制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>

.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;
                }
            }
        }
    }
}

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