Блог

Главная - Вопросы по программированию - Как сделать вертикальный и горизонтальный центр без растяжения изображения с помощью css?

Как сделать вертикальный и горизонтальный центр без растяжения изображения с помощью css?

#html #css #sass #less #stretch

#HTML #css #sass #Меньше #растянуть

Вопрос:

Если я задам ширину и высоту с помощью css (ширина: 100%; высота: 100%), изображение будет растянуто, и это выглядит некрасиво. Как заполнить изображения без растяжения? Более того, как сделать вертикальный и горизонтальный центр?

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

1. Вам нужно изображение в качестве фона или как html-тег <img /> ?

Ответ №1:

Используя только HTML и CSS:

HTML

 <div class="fill"></div>

CSS

 .fill {
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Ответ №2:

Используйте

Кредиты владельцу изображения источник изображения: https://imgur.com/gallery/ow0qD

 * {
  margin: 0;
}

.bg {
  width: 100%;
  height: 100vh;
}

.bg img {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}  
 <body>
  <div class="bg"><img src="https://i.imgur.com/PLZJasi.jpg"></div>