css - 使用 CSS 样式表(背景图像属性)在同一行 float 2 个图像

Question

我有 2 张高度和宽度完全相同的图片。我希望他们坐在同一排。然而，它们加起来比车身宽度大得多。我已经使用 IMG 标签通过 HTML 标签插入它们。

<div class="wrapper">
  <ul id="gallery">
    <li>
      <img src="http://www.picturesnew.com/media/images/image-background.jpg" alt="">
      <p>Test image 1 off google.</p>
    </li>
    <li>
      <img src="http://www.picturesnew.com/media/images/image-background.jpg" alt="">
      <p>Test image 2 off google.</p>
    </li>
 </ul>  
</div>

为了限制尺寸，我将它们向左浮动并应用了 % 宽度。 这是代码的 CSS:

.wrapper{
  width:80%;
  margin:0 auto;
}
img{
  max-width:100%;
  max-height:100%;
}

#gallery{
  list-style:none;
}

#gallery li{
  float:left;
  width:50%;
}

我可以使用 background-image:url('') 而不是 IMG 标签来完成同样的事情吗？

Answer 1

这是我所做的工作。

#gallery li{
  float:left;
  width:50%;
//I added this and removed the original img tags in the html code. 
  background-image:url(http://www.picturesnew.com/media/images/image-background.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height:500px;
}