使图像分区响应

Question

我正在努力使“fullwidthbanner”中的图像完全响应。可能问题在于它有两个我希望它随尺寸变换的图像。

这是我的HTML

<div class="main-container col1-layout">
    <div class="main row-second clearfix">

        <div class="col-main">
              <div class="std"><div class="sub-container"><div class="fullwidthbanner-container">
                  <div class="fullwidthbanner>

                      <div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
                      <div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
                  </div>
              </div> 
        </div>
    </div>                
</div>

CSS

.sub-container {overflow:auto;}
.main-container {background:#fafafa; }
.main { margin:0 auto; position: relative; z-index:1; }

.sub-container div.item{ background-color:red; float:left;}
.sub-container div.item:hover{ background-color:green;}
.sub-container div.item img{ width:100% !important; display:block;}

出于某种原因，它会完成我想要的所有内容，但两个图像都在宽度方面完全扩展。宽度始终保持不变，当窗口大小增加时，它只显示两个图像前面的空白区域。

Answer 1

假设这是html：

<div class="main-container col1-layout">
  <div class="main row-second clearfix">
    <div class="col-main">
      <div class="std">
        <div class="sub-container">
          <div class="fullwidthbanner-container">
            <div class="fullwidthbanner">
              <div class="item">
                <img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
              </div>
              <div class="item">
                <img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
              </div>
            </div>
          </div> 
        </div>
      </div>                
    </div>
  </div>                
</div>

这个css能做你想做的吗？

.sub-container div.item {
  background-color: red;
  float: left;
  width: 100%;
}

虽然我建议使用max-width而不是width - 这会使它适应较小的屏幕，而在较大的屏幕上则不会变得模糊。