flexslider Размер изображения обложка

Question

Для моего личного сайта http://stevengeorgeharris.com Я создал единый дизайн страницы с несколькими divs, уложенными друг на друга. Divs - ширина: 100% и высота: 100%, поэтому они масштабируются в браузере, в каждом div я использую flexslider для создания полноэкранного слайд-шоу.

Моя проблема заключается в том, что браузер становится более узким в пределах контейнера контейнера flexslider, оставляя пробел ниже.

Это CSS для изображения flexslider.

.flexslider .slides img {width: 100%; height:auto; display: block;} 

Есть в любом случае, чтобы сделать изображение действовать как этот http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

Answer 1

Для этого следует использовать медиа-запрос. Вы можете узнать больше о медиа-запросе здесь: https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Я сделал то, что вы хотели; с другой картиной, и вы можете увидеть окончательный результат здесь: http://jsbin.com/olakit/2

Вот код (оригинал изображение 1024 х 683 пикселей):

img { 
    width: 100%; 
    height : 100%; 
} 

@media (min-width: 2000px) { 
    img{ 
    height: auto; 
    } 
} 

Обратите внимание, что «мин-ширина» должна быть более чем ширина изображения.