Установка большого фонового изображения для размещения в маленьком div

Question

Таким образом, у меня есть изображение шириной 700 пикселей, которое является тем, что я использую в качестве фонового изображения в div с шириной 200 пикселей.

Я хочу сохранить изображение такого размера, чтобы он мог поддерживать хорошее разрешение для небольших устройств. Однако проблема, с которой я сталкиваюсь, заключается в том, что изображение больше, чем div, переполняет изображение (скрыто), но я хочу, чтобы изображение изменялось и соответствовало размеру div, а не переполнялось.

Мой ДИВ в настоящее время:

.featurebox{ 
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ; 
width:200px 
} 

Answer 1

Определить и ширину и высоту, а затем использовать background-size: cover

Answer 2

вы можете попробовать это?

background-size:100%; 

Answer 3

Попробуйте добавить это:

background-size: 100% 100%; 

если вы используете

background-size: 100%; 

высота устанавливается в автоматический режим, а затем еще может перекрываться.

Answer 4

Вы можете установить фон-размер:

.featurebox { 
 
background: #F9C112 url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center top; 
 
background-size: 200px 200px; 
 
width: 200px; 
 
height: 200px; 
 
}

<div class="featurebox"> 
 
</div>