0

我正在尝试使“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;}

出于某种原因，它可以满足我的所有需求，但是两个图像的宽度都完全扩展了。宽度始终保持不变，当窗口大小增加时，它只会在两个图像前面显示一个空白区域。

4

1 回答 1

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-- 这将使它适应较小的屏幕，并且在较大的屏幕上它不会变得模糊。

于 2013-07-27T21:58:57.000 回答