CSS browers width

Question

Мой проект зависит от блоков - если вы нажмете href в меню, например, на сайте «about», чтобы вы могли блокировать обратное изображение. Фоны блоков должны настраиваться на пользователя разрешения. Everythnig отлично работает, но если мы хотим изменить размер шрифтов в ширину, то изображения просто неестественны. Я thnink, что невозможно решить эту проблему, если мы хотим остаться с:

width:100%; 
height:100%; 

SO Как сделать дивы с bacgrounds изображения, которое будет приспосабливаются к решению widscreen, но если мы изменим размер фрезы для пользовательский пример: фоновое изображение 365x900 будет по-прежнему в тех же разрешениях (одно и то же разрешение означает, что размер зависит от разрешения экрана)

Лучшая ситуация будет тогда, когда bacground-изображения будут соответствовать стандартным разрешениям, но если мы изменим размер броузеров, например, на 200x900, тогда они не изменят свои размеры и будут оставаться в максимуме (максимальный размер зависит от разрешения экрана)

CSS

#raz { 
    background-size:100%; 
    background-repeat: no-repeat; 
    margin-top: -300px; 
    border: 0px; 
    padding: 0px; 
    left: 0px; 
    width: 1200px; 
    height: 100%; 
    overflow: hidden; 
    z-index: 0;   
} 

#bg_raz { 
    position:absolute; 
    text-align:center; 
    width:100%; 
    height:100%; 
} 

#dwa { 
    background-size:100%; 
    background-repeat: no-repeat; 
    margin: 0px; 
    border: 0px; 
    padding: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    z-index: 0;   
} 

#bg_dwa { 
    position:absolute; 
    width:100%; 
    height:100%; 
} 

HTML

<div id="dwa"> 
    <img id="bg_dwa" src="http://lorempixel.com/output/city-q-c-600-325-4.jpg"> 
</div> 

<div id="raz"> 
    <img id="bg_dwa" src="http://lorempixel.com/output/city-q-g-600-325-7.jpg"> 
</div> 

JSBIN

Answer 1

Если вы используете background-size: cover; и добавьте background-image на #dwa, вы можете удалить <img/>.