在调整大小时重叠图像的一部分与css

Question

我有一个精灵图像，我希望它在悬停时动画，如向上/向下滑动以显示其他隐藏部分（彩色精灵）。我的下面的CSS适用于像素，但我也想让它响应，以便在浏览器最小化/调整大小时调整大小。

<div class="img" style="background-image: url(a.jpg)"></div>

<style>
.img {
    background-position: 0 -258px;
    display: block;
    height: 258px;
    margin: 0 0 3px;
    position: relative;
    width: 205px;
    z-index: 1;
}
</style>

Answer 1

使图像响应的最简单方法是将其宽度设为100％并保持不变。这样，它将始终使用父容器的宽度，并使用该宽度来查找适当呈现高度的比率。

看看这个：

<div class="wrapper"><img class="img" src="a.jpg" width="100%" alt="image" /></div>

<style>
  .wrapper { width:20%;}
</style> 

在上面的代码中，图像将根据包装器的尺寸进行调整，并在调整窗口大小时调整大小。

但是使用你的代码，你需要隐藏部分图像，因此设置包装类以使其具有响应性将是一个令人头疼的问题。

以下是我的想法：

<style>
  .wrapper { width:244px; height:256.5px; overflow:hidden;}
  .img{transition: 1s ease-in;}
  .wrapper:hover > .img{ margin-top:-105%;}
</style> 

现在你所要做的就是让你的包装类流畅，图像将跟随套件。 Mybe百分比可以解决问题。