div с фиксированным фоном

Question

Я пытаюсь добавить div в свой html с изображением коробки в нем. Но я не смог сделать изображение растянуть до размеров Div в

Вот что я пока,

<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px"> 
    test 
</div> 

этом отображает DIV с шириной 600px и высотой 400px но отображает половину изображения. но мне нужно, чтобы изображение растягивалось.

благодаря

Answer 1

Если вы хотите, чтобы изображение растягивалось, теряя исходное соотношение сторон, добавьте background-size: 100% 100%;.

С другой стороны, если вы хотите, чтобы изображение, чтобы занять весь DIV при сохранении соотношения сторон изображения и некоторое отсечение в порядке, используйте background-size: cover

Answer 2

использование background-size: cover; или background-size: contain (выбрать подходящую недвижимость для своих нужд)

От MDN

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

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