html - 将图像加载到可缩放的 DIV 中

Question

我正在尝试使用 thumbnailviewer2.js 将图像加载到设置为占用当前浏览器窗口宽度的 div 中。图像加载良好，但不会缩放到当前 DIV 宽度的大小。

我的代码看起来像这样

HTML：

<div id="loadarea2">
  <img class="mainimage" src="images/slide1.jpg" alt="front image" />
</div>

<div id="thumbs">
  <ul class="categoryitems">
    <li>
      <a href="images/slide1.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click, preload:yes" >
        <img src="images/thumb01.jpg" border="0"/>
      </a>
   </li>

CSS：

#loadarea2 {
    width:100%;
    height:auto;
    width: auto\9; /* ie8 */    
    min-width:800px;
    background-color:#000000;
}

.mainimage {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */    
    min-width:800px;
}

有人知道我哪里出错了吗？

谢谢

Answer 1

将宽度设置mainimage为inherit。

.mainimage
{
    max-width: 100%;
    height: auto;
    width: inherit;
    width: auto\9; /* ie8 */    
    min-width:800px;
}