0

我有一个精灵图像，我希望它在悬停时进行动画处理，如向上/向下滑动以显示其他隐藏部分（彩色精灵）。我下面的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>
在此处输入图像描述

4

1 回答 1

0

使图像具有响应性的最简单方法是将其宽度设置为 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 百分比可以解决问题。

于 2013-11-11T19:23:16.747 回答