Question

我正在使用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>

这是mouseover 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;
}

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

任何想法都将不胜感激！

Answer 1

因为您正在使用背景图像，所以应用于#feature img的属性不会执行任何操作。您可能希望使用background-size: cover进行探索，并使用2个图像作为悬停，而不是精灵。这是一篇包含一些好文档的文章。 http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

使用鼠标悬停效果时，图像不会调整为Skeleton容器

1 个答案: