0

「fullwidthbanner」の画像を完全にレスポンシブにしようとしています。サイズに合わせて変換したい2つの画像があることが問題かもしれません。

これは私の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 に答える