Html 使图像div具有响应性

我试图使“fullwidthbanner”中的图像完全响应。可能的问题是，它有两个图像，我想它的大小转换

这是我的HTML

---

出于某种原因，它做了我希望它做的一切，但两个图像都在宽度上完全扩展。宽度始终保持不变，当窗口大小增加时，两幅图像前面都会显示一个空白。

假设这是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>

---

尽管我建议使用

max width

，而不是

width

——这将使它适应较小的屏幕，在较大的屏幕上它不会变得模糊。

您有div

。sub container

和

。fullwidthbanner container

，您显然忘记了这两个容器——它们没有关闭。另外，

.fullwidthbanner

缺少一个双引号。@MohammadAreebSiddiqui让我们把宗教排除在外。

.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;}

<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>

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