html - 如何让 child 向左过渡而不缩放？

Question

我试图让子图像向左滑动并像父图像一样消失。如果您现在运行截图，图像会缩放而不是向左滑动。

如何防止图像缩放？并让图像向左滑动并像父级一样消失？

转换将由媒体查询触发。

这是我的代码。

.parent {
  height: 130px;
  width: 180px;
  background-color: #fff;
  border-bottom-right-radius: 10px;
  border: 1px solid #000000;
  text-align: center;
  float: left;
  position: fixed;
  z-index: 1;
  transition: ease all 0.3s;
}

.child {
  width: 100%;
  height: 100%;
  background-size: contain;
  text-indent: -9999px;
  display: block;
  background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (max-width: 655px){
  .parent {
    visibility: hidden;
    width: 1px;
  }
}

<div class="parent">
  <span class="child">
    </span>
</div>

Answer 1

我建议您的最简单的解决方案是为 .child 元素设置 visibility:visible;，这可行，但某些浏览器不支持。这是唯一使 child element 在 hiding parent 元素上 visible 的元素。

The visibility property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table.

解决方案 - 1 检查这个jsfiddle

.parent {
  height: 130px;
  width: 180px;
  background-color: #fff;
  border-bottom-right-radius: 10px;
  border: 1px solid #000000;
  text-align: center;
  float: left;
  position: fixed;
  z-index: 1;
  transition: ease all 0.3s;
}

.child {
  width: 100%;
  height: 100%;
  background-size: contain;
  text-indent: -9999px;
  display: block;
  background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (max-width: 655px){
  .parent {
    visibility: hidden;
    width: 1px;
  }
  .child{
    width:180px;
    height:130px;
    visibility:visible;
    background-size:100% 100%;
  }
}

<div class="parent">
<span class="child">
</span>
</div>

解决方案 - 2
检查这个jsFiddle

创建两个不同的元素并使用opacity隐藏到div下面。

#bx{
  width:200px;
  height:130px;
  background:#111;
  transition: ease all 0.3s;
}
#b{
  width:200px;
  height:120px;
  top:13px;
  left:8px;
  position:absolute;
  background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:100%;
  margin-left:0;
  transition: ease all 0.3s;
}
@media screen and (max-width: 655px){
  #bx{
    width:1px;
    opacity:0;
  }
  #b{
        margin-left:-220px;
  }
}

<div id="bx"></div>
<div id="b"></div>