Div внутри div, включая фоновое изображение

У меня есть два div. Первый - это «родительский», который предоставляет ширину и высоту для другого div. У второго div есть фоновая привязка: исправлена и есть проблема ... Мое изображение не будет отображаться при ширине: 100% и высоте: 100%. Когда изображение имеет высоту: 800 пикселей, все в порядке, но первый div не будет масштабироваться с изображением, когда я изменяю разрешение экрана, чтобы между изображением и остальным содержимым было пустое пространство. Есть идеи, как это исправить? Спасибо за ваш ответ!Div внутри div, включая фоновое изображение

<div class="divimgparent"> 
<div class="divimg"></div> 
</div> 
.divimgparent {width: 100%; height: auto;} 
.divimg {background: url("../images/1.jpg"); width: 100%; height: 800px; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

источник

2015-11-03 Dariusz Krupa

Да, это потому, что вам нужно дать 'height' любому родителю или ребенку. 'height: auto;' работает на основе вашего контента. Он не имеет определенной высоты, где в вашем случае 100%, он считает, что 100% от... Divparentimg' – divy3993

изменит свойство css для фона. 'background-size: cover;' Тогда изображение будет растягиваться в соответствии с разрешением экрана. –

Попробуйте этот. Здесь ваш родительский div не получает высоту, когда ваш css имеет высоту: auto ;. Итак, вам нужно определить высоту для родительского div.

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.divimgparent { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.divimg {background: url("http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg");width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

<div class="divimgparent"> 
 
<div class="divimg"></div> 
 
</div>

источник

2015-11-03 04:20:50 user2584538

<div class="divimgparent"> 
    <div class="divimg"></div> 
</div>

.divimgparent {width: 100%; height: 90vh;} 
 
.divimg {background: url("http://s9.postimg.org/bxayc3y3z/Desert.jpg"); width: 100%; height:100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

пожалуйста, попробуйте это.

demo

источник

2015-11-03 04:52:19 user5469923

Div внутри div, включая фоновое изображение

ответ

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