1

我正在使用 Skeleton 创建一个响应式网站。通常，当浏览器窗口大小发生变化时，每个容器中的图像都会相应地调整，但是，我遇到了两个包含鼠标悬停效果的图像的问题。

这是HTML。将鼠标悬停在图像上会触发替换图像。

<div class="row">
  <div id="feature" class="eight columns alpha">
<a href="http://swordandplough.com/pages/lookbook" class="cssmouseover" style="background-image: url('http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Lookbook-Link.jpg?3039');"></a>
</div>
  <div id="feature" class="eight columns omega">
<a href="http://swordandplough.com/pages/video" class="cssmouseover" style="background-image: url('http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Video-Link.jpg?3039');"></a>
</div>
</div>

这是鼠标悬停 CSS。

a.cssmouseover {
display:block;
width:580px;
height:260px;
max-width:100%;
max-height:100%;
background-position:50% 0%;
}
a.cssmouseover:hover {
background-position:50% -100%;
}

我还添加了以下 div ID 以尝试正确调整图像大小，但它不起作用。

#feature img {
max-width: 100%;
height: auto;
}

不是按比例缩放，而是图像高度保持相同大小，并且宽度在两侧被裁剪。

任何想法将不胜感激！

4

1 回答 1

1

因为您使用的是背景图像，所以应用于#feature img 的属性没有做任何事情。您可能想探索使用background-size: cover和使用 2 张图像进行悬停，而不是精灵。这是一篇带有一些很好文档的文章。 http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

于 2012-12-24T18:35:21.323 回答