将大图像精灵放置在小 div 中并根据窗口调整大小进行调整答案

【问题标题】：placing large image sprite in small div and adapt according to window resize将大图像精灵放置在小 div 中并根据窗口调整大小进行调整
【发布时间】：2016-07-05 14:53:21
【问题描述】：

.icon-parkfinder_1 {
  background-image: url(../images/sprites.png);
  background-position: -1080px 0px;
  width: 1080px;
  height: 1920px;
}

我有一个大的图像精灵，我把它放在小 div 中。我希望它能够响应。但它没有用。应该为“div”设置什么样式以适应图像并适应窗口大小调整

【问题讨论】：

背景大小：100% 100%

标签： html css sprite css-sprites

【解决方案1】：

以下代码将为您提供一个响应适合页面大小的图像。

.icon-parkfinder_1 {
  background-image: url(../images/sprites.png);
  max-width: 1080px;
  width: 100%;
  height: 1920px;
  background-repeat: no-repeat;
  background-size: 100%;
}

【讨论】：

【解决方案2】：

您可以为您的 div 添加一个 background-size: 封面。

.icon-parkfinder_1 {
  background-image: url(../images/sprites.png);
  width: 1080px;
  height: 1920px;

  background-size: cover;
  background-position: center;
}

【讨论】：