Блог

Главная - Вопросы по программированию - Как сохранить центр фонового изображения в html css

Как сохранить центр фонового изображения в html css

#html #css

Вопрос:

Итак, я создал html-страницу с фоновым изображением человека на ней вот так. Я хочу сделать его отзывчивым, чтобы, когда я открываю веб-страницу на телефоне, человек находился в центре (показывает центр изображения). На данный момент вывод показывает левую часть изображения следующим образом. Есть ли какая-либо часть в css, которую я могу изменить, чтобы это произошло?

Комментарии:

1. Используйте background-position: center

2. Это помогло бы нам дать полный ответ, который будет работать для устройств с любым соотношением сторон, если бы вы могли разместить небольшой фрагмент кода, который включает ваше изображение. Поскольку человек занимает центральное место в горизонтальном направлении, background-position: center будет хорошо работать для этого, но они не являются центральными в вертикальном направлении, поэтому необходимо подумать о том, как расположить изображение вертикально на узком устройстве в альбомном режиме.

Ответ №1:

Измените свой HTML-код, как показано ниже. Вы можете увидеть ссылку

 <div class="imageDiv">
       <img class="imageClass" src="../yourfile/" />
</div>

Затем попробуйте использовать следующий CSS:

 div.imageDiv {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.imageClass {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}

Ответ №2:

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

В этом фрагменте используются как background-size: cover — для обеспечения покрытия всего элемента (в данном случае тела), так и background-position: center center — чтобы получить (примерно) заголовок в центре как по вертикали, так и по горизонтали.

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

 body {
  background-image: url(https://i.stack.imgur.com/E2Emo.jpg);
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center center;
} 
 <body></body>
Метки: