Блог

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

Как я могу сделать свое адаптивное загрузочное изображение идеально круглым?

#html #css #image #bootstrap-4

Вопрос:

Я пытаюсь сделать свой образ идеально круглым и отзывчивым. Я использую класс Bootstrap 4 rounded-circle img-fluid , но изображение овальное, а не круглое. Изображения будут загружены пользователями, поэтому они не будут (всегда) в квадрате.

 .nh-service-card img {
  object-fit: cover;
} 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<div class="row">
  <div class="col-4 nh-service-card-img">
    <img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="img-fluid rounded-circle" width="85" height="85">
  </div>
</div>

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

1. Знаете ли вы размер каждого загружаемого изображения?

2. @Доминик Нет. Каждый пользователь может загрузить изображение любого размера.

3. Мой вопрос заключается в следующем: предоставляет ли ваш сервер вам индивидуальный размер каждого загружаемого изображения? Потому что это очень помогло бы 😉

4. @Доминик. Я не уверен, мне пришлось бы спросить свою команду разработчиков.

Ответ №1:

С вашим кодом есть несколько проблем:

  1. object-fit работает только в том случае, если для заменяемого элемента определена явная высота
  2. Ваши имена классов неверны: в вашей разметке у вас есть nh-service-card-img , но в селекторе у вас есть nh-service-card

Мое решение зависит от требования, чтобы вы могли изменить DOM для добавления дополнительной оболочки <div> вокруг изображения.

Решение 1: aspect-ratio: 1

Самый современный способ сделать это-просто aspect-ratio: 1 надеть элемент упаковки. aspect-ratio Свойство относительно хорошо поддерживается, особенно среди современных браузеров evergreen.

 .image-wrapper {
  aspect-ratio: 1;
}

.nh-service-card-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
} 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<div class="row">
  <div class="col-4 nh-service-card-img">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="rounded-circle" width="85" height="85">
    </div>
  </div>
</div>

Решение 2: padding-bottom: 100% принудительно увеличить квадратное соотношение сторон

В качестве альтернативы, если вы хотите поддерживать старые браузеры, воспользуйтесь этим padding-bottom трюком:

 .image-wrapper {
  padding-bottom: 100%;
  position: relative;
}

.nh-service-card-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
} 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<div class="row">
  <div class="col-4 nh-service-card-img">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="rounded-circle" width="85" height="85">
    </div>
  </div>
</div>
Метки: