#html #css
#HTML #css
Вопрос:
Это то, что происходит с кодом.
Вот код…
<div style="background-image: url(img/background.jpg);background-repeat: no-repeat; height:250px;"></div>
Размер изображения составляет 963 Вт x 200h.
В конце концов, я бы хотел, чтобы ширина была 100%, но также была адаптивной для всех устройств. Как я могу это сделать?
добавление background-size:cover; не будет делать этот трюк.
Вот скрипка: https://jsfiddle.net/t7ekj0mh /
Комментарии:
1. ширина: 100%; для ширины, высота: 100vh; для высоты. также есть <meta name = «viewport» content = «width = device-width, initial-scale = 1.0″> и вы можете использовать <div class=»imageArea><img width=»100%» height=»100%»></div> вместо фона
2. у меня есть окно просмотра. <meta name=»viewport» content=»width= device-width, начальный масштаб = 1, усадка по размеру = нет»> …. но то, что вы заявили, также не работает. берет все, что у меня есть под этим div, и опускает его вниз. а также не делает ширину фона 100%, это сделает div 100%.
Ответ №1:
Добавьте правило background-size: contain в свой div .
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<body>
<div style="background-image: url(https://i.ibb.co/2jCzQB6/background2.jpg);background-repeat: no-repeat; background-size: contain; height:250px;"></div>
</body>
</html> Ответ №2:
Добавьте background size contain , чтобы изображение масштабировалось по горизонтали
Насколько я понимаю, это то, чего вы пытаетесь достичь.
div{
background: #E6DCDD url(https://i.ibb.co/2jCzQB6/background2.jpg) center bottom / contain no-repeat;
height: 300px;
border: 5px dashed red;
} <div></div> Это растянет изображение по горизонтали и разместит его внизу, а при добавлении цвета оно будет казаться цельным.