如何在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

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