更改背景图像没有响应答案

【问题标题】：changing background image is not responsive更改背景图像没有响应
【发布时间】：2016-09-21 16:09:22
【问题描述】：

所以我正在尝试使用 css 转换更改背景图像，我有一个问题是 img 没有以这种方式响应谁能帮我想出一种 100% 高度和宽度的方法？

.container{
  width:100%;
  height:600px;

}

.container img, .top{
    max-width:100%;
  max-height:100%;
}

.top{
  width:100%;
    height:300px;
   -webkit-transition: background-image 0.5s;
    display:block;
}

.top:before{
  content: "";
  background-image:url(https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg);
    background-repeat: no-repeat;
    background-size: contain;
   -webkit-transition: background 0.5s;
    width: 100%;
    height: 100%;
  display:block;
}

.container:hover .top:before {
    content: "";
    background-image: url(http://www.jokopost.com/wp-content/uploads/2015/09/%D7%90%D7%99%D7%A7%D7%A1-commons.wikimedia.org_.png);
    -webkit-transition: background 1s;
    width: 100%;
    height: 100%;
    display: block;
}


<div class="container">
<div class="top">
</div>
</div>

https://jsfiddle.net/7ejtydts/2/

【问题讨论】：

标签： css css-transitions

【解决方案1】：

使用“背景尺寸：包含；”将使图像具有响应性，但不会将其拉伸超出其尺寸。因此，您发布的示例是响应式的，但前提是您将容器变小。

使用“背景尺寸：封面；”将使图像拉伸到容器的大小。这样做的缺点是如果容器的比例不同，它会切断图像的边缘。

在这里看看我更新的小提琴：

.container{
  width:600px;
  height:600px;

}

.container img, .top{
    max-width:100%;
  max-height:100%;
}

.top{
  width:600px;
    height:400px;
   -webkit-transition: background-image 0.5s;
    display:block;
}

.top:before{
  content: "";
  background-image:url(https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  background-position: center;
   -webkit-transition: background 0.5s;
    width: 100%;
    height: 100%;
  display:block;
}

.container:hover .top:before {
    content: "";
    background-image: url(http://www.jokopost.com/wp-content/uploads/2015/09/%D7%90%D7%99%D7%A7%D7%A1-commons.wikimedia.org_.png);
    -webkit-transition: background 1s;
    width: 100%;
    height: 100%;
    display: block;
}

https://jsfiddle.net/7ejtydts/3/

【讨论】：

您可以查看使用真实图像而不是背景图像，或者您可以使用背景图像但确保容器具有固定的宽度/高度比。或者，您可以使用边缘周围有足够空间的背景图像，这样您就可以切掉一些部分，并且看起来没有任何不同。

【解决方案2】：

试试这个代码，它会调整图像的响应速度。

.top::before {
    background-image: url("https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.top {
    display: block;
    height: 600px;
    position: relative;
    width: 100%;
}

【讨论】：