Как разместить фоновую картинку?

108
07 февраля 2022, 18:20

https://ibb.co/4VqLgcS - ссылка на картинку.
Нужно сделать так, чтобы на сайте она размещалась, так же как на макете, представленном выше. С помощью position не получается, т.к. вся картинка смещается вправо и появляется скролл по ширине.
Что сделать чтобы при выходе за экран она обрезалась?

Answer 1

А это зависит от того, что вам нужно. Ваш вопрос не совсем понятен.
Это варианты с картинкой:

.block_one { 
  width: 200px; 
  overflow: hidden; 
} 
 
.block_two { 
  width: 200px; 
  height: auto; 
} 
 
.block_two img { 
  width: 100%; 
  height: auto; 
}
<div class="block"><img src="https://i.stack.imgur.com/qQoD4.jpg" alt="Дорогие друзья, с Рождеством, с Новым 2020 Годом!"></div> 
<div class="block_one"><img src="https://i.stack.imgur.com/qQoD4.jpg" alt="Дорогие друзья, с Рождеством, с Новым 2020 Годом!"></div> 
<div class="block_two"><img src="https://i.stack.imgur.com/qQoD4.jpg" alt="Дорогие друзья, с Рождеством, с Новым 2020 Годом!"></div>

А это варианты с фоном:

.block { 
margin: 5px; 
  width: 500px; 
  height: 200px; 
  border: 2px solid gray; 
  background: url(https://i.stack.imgur.com/qQoD4.jpg) no-repeat; 
} 
 
.block_one { 
  background-size: auto; 
} 
 
.block_two { 
  background-size: cover; 
} 
 
.block_three { 
  background-size: contain; 
}
<div class="block block_one"></div> 
<div class="block block_two"></div> 
<div class="block block_three"></div>

READ ALSO
заменить src=&quot;&quot; во фрейме

заменить src="" во фрейме

При вставке в форму кода от видео ссылки, необходимо что бы данное видео проигрывалось в плеере ниженапример youtube

120
Python _getch как в с++

Python _getch как в с++

Как сделать функцию аналогичную _getch из с++

78
Что за выражение (1, S::x)?

Что за выражение (1, S::x)?

Что за выражение?

76
Указатель на const в MSVC и GCC

Указатель на const в MSVC и GCC

По какой причине данный код в MSVC работает иначе, нежели в gcc:

87