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

父div为百分比时保持图像比例

1 个答案: