Image 图像赢得'；使用鼠标悬停效果时，不调整骨架容器的大小

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

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

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

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

---

任何想法都将不胜感激

因为您使用的是背景图像，所以应用于#feature img的属性没有任何作用。您可能希望使用

背景大小：cover

进行探索，并使用两个图像作为悬停，而不是精灵。这是一篇包含一些好文档的文章。

---

因为您使用的是背景图像，所以应用于#功能img的属性没有任何作用。您可能希望使用

背景大小：cover

进行探索，并使用两个图像作为悬停，而不是精灵。这是一篇包含一些好文档的文章。

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