Компоновка Responisve для div, содержащего 3 пересекающихся изображения

Question

Компоновка Responisve для div, содержащего 3 пересекающихся изображения

0

Я пытаюсь сделать содержимое div отзывчивым, div состоит из двух изображений слева, а другой справа, а в середине есть изображение, часть среднего изображения будет слева и другая часть будет в правильном изображении,

Я хочу, когда экран изменяет размеры всех этих изображений соответственно,

это ссылка, http://syrdoccam.com/oleaotel/

    <div id="wrapper">
        <div class="header">
            <div class="topHead">
                <div class="container clearfix">

            </div>
        </div>
    </div>
    <div class="content">
        <div style="height: 500px;">
            <!--<div id="pic1"> </div>--><img src="img/pic1.png" class="pic1" >
            <div class="reservation"></div>
        <!--<div id="pic2"></div>--><img src="img/pic2.png" class="pic2" >
        </div>
    </div>
    <div class="middle">

    </div>
</div>


.content {
    border-top: 1px solid #EEF0EF;
    box-shadow: 0 -1px 2px #DFE1DF;

    position: relative;
    z-index: 95;
}

.reservation {
    background: url("../img/reservation.png") no-repeat scroll;
    float: left;
    height: 74%;
    left: 33%;
    position: absolute;
    top: 26%;
    width: 52%;
    background-size: 100%;
}

что я могу сделать?

mfadel 18 апр. 2014, в 14:12

Источник

Теги:

html

css

responsive-design

2 ответа

0

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

img.pic1 {
width:30%
float:left;
}


img.pic2 {
width:30%
float:right;
}

.clear {
clear:both;

d.bayo 18 апр. 2014, в 09:30

0

это не сработало :)
mfadel 18 апр. 2014, в 13:24

Ещё вопросы

Jeyarathnem Jeyachanthuru · Accepted Answer · 2014-04-18T09-41-00.000Z

Поступай так.

<div class="content">
  <img class="left">
  <div class="detail"></div>
  <img class="right">
</div>

Стиль

.content {
  position:relative;
}

.content .left, .content .right, .content .detail {
  position:absolute;

  top:0;
  z-index:1;
}

.content .left {
  left:0;
}

.content .right {
  right:0;
}

/** For Click-able dive**/
.content .detail {
  z-index:2;
  left:25%; /** Putt how much u want **/
}

#Jey Theva это очень помогло, но не решило полностью, сейчас я работаю над изменением размеров изображений при изменении размеров экрана