Div與奇數像素的圖像比例？

Question

我嘗試使用方形圖像製作響應式網格，但第一個方形圖像需要是其他方形圖像的兩倍。我可以用jQuery做到這一點，但我想用css修復它，如果可能的話。

網格 這是一個網格的例子。紅色正方形是的div內的圖像：

我認爲這會工作

我想這將是簡單的方式： 如果每個div有20％的寬度，第一項應該有40％。所有div的高度都是自動的，因爲所有圖像都是500 x 500像素。因此，高度可以縮放兩倍是合乎邏輯的。

令我驚訝的是它不適用於所有屏幕尺寸。在一些屏幕上，第一個div是1像素到大。示例：當第一個圖像的高度爲533px時，第一個圖像旁邊的圖像的高度爲266 px。這意味着第一個圖像是1像素到大（266 x 2 = 532）。所以圖像的第三行出錯了。

下面是在線網格示例：http://bit.ly/LKdKMj將瀏覽器縮小到較小的大小，您可以看到圖像的行爲。

有人知道爲什麼這不起作用嗎？

我在下面添加了HTML和CSS。

非常感謝，

Wnd中

HTML：

<div class="container"> 

    <header id="header"> 
    </header> 

    <nav id="leftmenu"> 
    </nav> 

    <section id="content"> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
      <article class="item"> 
       <img src="img/item.jpg" alt=""/> 
      </article> 
    </section> 

</div> 

CSS：

html, body{margin: 0; padding: 0;} 

#header{ 
    width: 100%; 
    height: 100px; 
    background: #222; 
} 

#leftmenu{ 
    height: 1000px; 
    width: 20%; 
    float: left; 
    background: #505050; 
} 

#content{ 
    width: 80%; 
    float: left; 
} 
#content .item{ 
    float: left; 
    padding: 0px; 
    margin: 0px; 
} 
#content .item img{ 
    width: 100%; 
    display: block; 
    height: auto; 
} 

/*GRID*/ 

@media only screen and (max-width: 2700px) { 

    #content .item:first-child{width: 25%;} 
    #content .item{width: 12.5%;} 

} 

@media only screen and (max-width: 1920px) { 

    #content .item:first-child{width: 40%;} 
    #content .item{width: 20%;} 

} 

@media only screen and (max-width: 1400px) { 

    #content .item:first-child{width: 50%;} 
    #content .item{width: 25%;} 

} 

@media only screen and (max-width: 1024px) { 

    #content .item:first-child{width: 66.66666%;} 
    #content .item{width: 33.33333%;} 

} 

@media only screen and (max-width: 720px) { 

    #content .item:first-child{width: 66.66666%;} 
    #content .item{width: 33.33333%;} 

} 

@media only screen and (max-width: 520px) { 

    #content .item, #content .item:first-child{width: 50%;} 

} 

Answer 1

你永遠無法確定與百分比。 我相信一個解決方案是永遠不會100％。而是使用類似： width:25%-2px例如，

或瞄準所佔比例較小（不是100％，但99％） 讓你的div應該例如：39.5％+ 19.5％+ 19.5％+ 19.5％，而不是40％+ 20％+ 20％+ 20％ （這些數字僅用於演示，不適用於您的特定代碼）

Answer 2

您可以使用與寬度相同百分比的padding-bottom 。這將使他們始終保持平方。

#content .item{ 
    position: relative; 
    float: left; 
    margin: 0px; 
    width: 40%; 
    padding-bottom: 40%; 
} 

你那麼可以將圖像中的一些絕對定位

#content .item img{ 
    width: 100%; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

檢查這個小提琴。我用佔位符替換了空白圖像標籤以獲得更好的可視化效果。

http://jsfiddle.net/Haroldchen/LWR3X/