jquery - 如何让图像在 chrome、IE 和 safari 中调整大小

Question

我正在开发一个使用 jquery tabs api 的网站。对于每个选项卡，我都有一张图片，当浏览器的大小发生变化时，我想调整图片的大小。

这是其中一个选项卡的示例

<li style='width:15%'>
  <a href="/fu...">
   <img src="/Funde..." alt="BreakOut" class="breakoutFundviewImage">
  </a>
</li>

我使用简单的 CSS 在 firefox 和 IE 中运行良好

.breakoutFundviewImage
{
    height:30px;    
    width: 100%;    
}

不幸的是，这在 chrome、safari 中不起作用。图像只是以全尺寸显示，因此在选项卡中只能看到图像的一半。

有谁知道这样做的正确方法吗？任何帮助都会很棒。

Answer 1

不要在图像上设置高度，否则会破坏纵横比。您的代码是正确的，所以如果它们没有调整大小，那是因为父标签比您想象的要宽。您可能有一些溢出:隐藏在内部元素被裁剪而不是调整大小的地方。