Как сделать div с несколькими изображениями адаптивными?

Question

Как сделать div с несколькими изображениями адаптивными?

0

я делаю слайдер, и моя идея заключается в создании div и помещается в 4 изображения. Изображения будут складываться один над другим (с положением: абсолютный) и будут иметь ширину: 1013 пикселей, максимальная ширина: 100%, высота: авто (чтобы быть отзывчивым). Проблема в том, что если a не дает родительскому div height, я не могу скрыть переполнение, но если я это сделаю, когда экран будет мал, высота будет такой же, поэтому вы можете увидеть, например, половина второго изображения.

Я сделал эту скрипку, чтобы вы поняли:

http://jsfiddle.net/bS69a/

И мой код:

HTML

<div class="slider">
    <img src="http://k40.kn3.net/4/2/2/9/D/8/593.jpg" alt="slider" />
    <img src="http://k32.kn3.net/1/0/C/9/6/1/D4F.jpg" alt="slider" />
</div>

CSS

.slider{
    margin: auto;
    width: 90%;
    text-align: center;
}

.slider img{
    width: 100%;
    max-width: 600px;
}

mrpinkman 07 май 2014, в 00:22

Источник

Теги:

javascript

html

css

2 ответа

Ещё вопросы

Donald Powell · Answer 1 · 2014-05-06T21-00-00.000Z

медиа-запросы и точки останова.

Bootstraps Обычно используемые контрольные точки: Bootstrap 3 точки останова и медиа-запросы

Пример, приведенный ниже, или ссылка на живой пример: http://jsfiddle.net/bA7wx/ (изменить пример окна примера на примере jsfiddle)

HTML

<div class="slider">
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
</div>

CSS

.slider{
    width; 100%
    height: auto;
}

.slider img{
    width: 24%;
}

@media (max-width: 992px) {
    .slider img{
        width: 48%;
    }
}

@media (max-width: 768px) {
    .slider img{
        width: 48%;
    }
}

@media (max-width: 480px) {
    .slider img{
        width: 90%;
        margin; 0 auto;
    }
}

creimers · Answer 2 · 2014-05-06T22-19-00.000Z

Если то, что вам нужно, содержит <div> который всегда подстраивается под размер экрана текущего устройства для посещения, вы можете использовать availHeight и $( window).resize() следующим образом:

$( window ).resize(function() {
    var screenHeight = window.innerHeight;
    $('#yourdiv').css('height', screenHeight); 
});