Изменение содержания содержимого html при масштабировании?

Question

Я искал ответы на свои вопросы, но ни один из результатов не разрешил его.

Вот что мое содержание выглядит на 100% зум:

Вот что мое содержание выглядит как после масштабирования:

Здесь мой код CSS:

body { 
    margin: 20px 10px 10px 10px; 
    background-color: #F2F4F7 ; 
} 
div { 
    max-width: 900px; 
    min-height: 590px; 
} 
#div1{ 
    float: left; 
    margin: 30px 0px 30px 30px; 
    width: 900px; 
    height: 590px; 
    background: url("1234.jpg"); 
    background-size: cover; 
    position:absolute; 
} 
#div2{ 
    margin: 30px 30px 30px 0px; 
    background-color: #E7E8E9 ; 
    float: right; 
    width: 365px; 
    height: 590px; 
    position:static; 
} 

Почему мое изображение меняет положение при масштабировании?

Answer 1

Ожидаемое поведение как ваш html и тело ширина элементов остается 100%;

Вы можете попробовать обернуть оба div элементов в одном контейнере с фиксированной шириной.