Сделайте этот div отзывчивым

Я пробовал ширину 100%, но он не делал его отзывчивым. Вот ссылка того, что я пытаюсь сделать отзывчивым. Он не реагирует. Помощь codepen link Сделайте этот div отзывчивым

div { 
 
    background:url(https://i.stack.imgur.com/EinaJ.png) top center; 
 
    width:620px; 
 
    margin:auto; 
 
    padding:40px 40px 30px; 
 
    height:590px; 
 
    position:relative; 
 
    display:flex; 
 
    flex-flow:column; 
 
    justify-content:center; 
 
} 
 
img, p, footer { 
 
    padding:5px; 
 
    margin:0; 
 
    background:pink 
 
} 
 
img { 
 
    margin:auto auto 0; 
 
} 
 
footer { 
 
    bottom:30px; 
 
    right:45px; 
 
    margin:auto 0 0; 
 
    border-radius:0 0 0.25em 0.25em ; 
 
    background:rgba(0,0,0,0.2); 
 
}

<div> 
 
    <img src=""> 
 
    <p>here is</p> 
 
    <footer>footer</footer> 
 
</div>

источник

2017-02-19 koku19

вы знаете, как реагировать проектные работы ли? Вы пытались использовать '%' вместо 'px', медиа-запросов? – AymDev

http://codepen.io/gc-nomade/pen/KaEywJ это ссылка – koku19

да Пробовала ширина: 100%, но она не работает ..... изображение или текст переполняются на окне изменения размера @AymDev – koku19

:root { 
 
    /*the percentage of screen width occupied by a block. 1 = 100% */ 
 
    --percent: .9; 
 
} 
 

 
div { 
 
    background: url(https://i.stack.imgur.com/EinaJ.png) top center; 
 
    background-size: cover; 
 
    /* for old browsers */ 
 
    width: 90vw; 
 
    height: 113.61516034vw; 
 
    /* for new browsers */ 
 
    width: calc(100vw*var(--percent)); 
 
    height: calc((100vw*var(--percent))*866/686); 
 
    box-sizing: border-box; 
 
    margin: auto; 
 
    padding: 40px 40px 30px; 
 
    position: relative; 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: center; 
 
} 
 

 
img, 
 
p, 
 
footer { 
 
    padding: 5px; 
 
    margin: 0; 
 
    /* see me */ 
 
    background: pink 
 
} 
 

 
img { 
 
    margin: auto auto 0; 
 
} 
 

 
footer { 
 
    bottom: 30px; 
 
    right: 45px; 
 
    margin: auto 0 0; 
 
    border-radius: 0 0 0.25em 0.25em; 
 
    /* see me */ 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 

 
body { 
 
    background: #777; 
 
}

<div> 
 
    <img src="http://lorempixel.com/200/150" /> 
 
    <p>here is</p> 
 
    <p>some line</p> 
 
    <p>of</p> 
 
    <p>text</p> 
 
    <footer>footer</footer> 
 
</div>

источник

2017-02-19 10:22:08

@ koku19 Помните, что переменные CSS, используемые в этом решении, имеют плохую поддержку браузера. – LGSon

@LGSon добавлен для моего решения в поддержку старых браузеров. –

Хорошо, все же, я не вижу смысла использовать переменную, так как вам все равно нужно жестко закодировать размер изображения, '866/686' ... Я имею в виду, если бы это было динамически прочитано, я мог видеть суть, теперь это просто сделайте CSS беспорядочным читать – LGSon

Причина это не реагирует, потому что вы установили ширину и высоту Див на определенный пиксел. Поэтому он не может настроить.

Попробуйте изменить пиксель в процентах:

Например:

width: 50%; 
height: 100%;

источник

2017-02-19 10:11:33

Это не работает, потому что это делает изображение на белом фоне обрезанным. – koku19

Я понимаю, что вы пытаетесь do.You're пытается иметь DIV в средний центр и отзывчивый. Установите margin:0 auto; и width:50%;. Избавьтесь от других бит кодов в div. Чтобы сделать его чувствительным к мобильному экрану делать:

@media only screen and (max-width:set_your_max){ 
    div { width:50%; } 
}

источник

2017-02-19 10:22:01

ответ

Смежные вопросы