将图像加载到可缩放的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;
}