使用 CSS 样式表（背景图像属性）在同一行上浮动 2 个图像答案

【问题标题】：Float 2 images on same row using a CSS stylesheet (background-image property)使用 CSS 样式表（背景图像属性）在同一行上浮动 2 个图像
【发布时间】：2014-08-24 04:48:22
【问题描述】：

我有 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标签来完成同样的事情吗？

【问题讨论】：

使用 div 代替 img，见这里w3schools.com/css/css3_backgrounds.asp

标签： css image background-image

【解决方案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;
}

【讨论】：