Div с изображениями с нечетными пикселями?

Question

Я пытаюсь создать чувствительную сетку с квадратными изображениями, но первое квадратное изображение должно быть в два раза больше, чем остальные. Я могу сделать это с помощью jQuery, но я хочу исправить его с помощью css, если это возможно.

Сетка Вот пример сетки. Красные квадраты дивы с изображением внутри:

Путь я думал, что это будет работать

Я думал, что это было бы просто: Если каждый DIV имеет ширину 20%, : первый предмет должен иметь 40%. Высота всех divs автоматически, потому что все изображения 500 x 500 пикселей. Так что было бы логично, что высота масштабируется дважды.

К моему удивлению, он не работает на всех размерах экрана. На некоторых экранах первый div имеет размер от 1 до большого. Пример. Когда первое изображение имеет высоту 533 пикселей, изображения рядом с первым изображением имеют высоту 266 пикселей. Это означает, что первое изображение размером от 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%) поэтому ваши дивы должны быть, например: 39,5% + 19,5% + 19,5% + 19,5% вместо 40% + 20% + 20% + 20% (номера приведены только для демонстрации и не применяются к вашему конкретному коду)

Answer 2

Вы можете сделать квадраты в квадратных скобках с помощью прокладки с таким же процентом, как ширина , которые будут держать их квадратными во все времена.

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