Как получить изображения разных размеров?

Question

У меня есть разные изображения размера в моих списках. Это вызывает чередование плиток ниже. Каков наилучший способ иметь изображения разных размеров (более высокие) в контейнере и иметь контейнер того же размера и гибко реагировать? Я использовал vw как высоту на изображении, которая устанавливает плитки одинакового размера, но заставляет самих изображений хлюпать, но это лучший способ? раскомментируйте vw в примере для просмотра.

Код Ручка: http://codepen.io/anon/pen/NNOWOZ

CSS:

ul{ 
    overflow:hidden; 
    width:50%; 
} 
li{ 
    list-style:none; 
    float:left; 
    margin:2% 1%; 
    border:1px solid black; 
    width:22%; 
} 
li img{ 
    width:100%; 
    /*height:10vw;*/ 
} 

Answer 1

Как вы уже заметили, float:left не может обеспечить обеспечить желаемые результаты, когда элементы различной высоты. В вашем примере они имеют одинаковую ширину, но разные высоты.

• Поскольку все ваши элементы процент ширины, вы знаете, что независимо от того, что размер контейнера, будет только 4 элементы, которые помещаются на каждой строке, так что следующий CSS решает проблему в этом примере

  li:nth-child(4n+1) { clear: left; } 
  

Другие варианты, которые работают лучше, когда число элементов в строке изменяется

• Замена float:left с display:inline-block даст вам более чистый эффект обтекания, но изображения будут выровнены по нижнему краю, а не выравниваются по высоте, как сейчас.

• Смонтируйте их в квадраты, чтобы ваши li s имели одинаковую ширину и высоту, а затем размещали изображения внутри с помощью max-width: 100%; max-height: 100%. Это приведет к определенной высоте, что позволит решить проблему float.

  • Вы можете предпочесть использовать background-image с background-size: cover, если вы хотите изображения обрежутся в квадрат, как много смартфона галереи приложений будут делать. Это не подходит для всех случаев использования. По умолчанию фоновые изображения не будут печататься.

  • Если вы идете по этому маршруту, вы можете также центрировать изображение по вертикали.

• Используйте JavaScript, который дает вам неограниченную гибкость, но требует больше работы.