css - 更改背景图像没有响应

Question

所以我正在尝试使用 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/

Answer 1

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

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

在这里看看我更新的 fiddle :

.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/