Закругленные края для фото

162

23 декабря 2018, 01:20

У меня есть карусель с разными фотографиями - разной высоты. Мне нужно сделать так, чтобы фото было с закругленными краями. Как это можно сделать? То, как есть сейчас - скриншот ниже.

Answer 1

Я вижу два варианта:
1. Заполнять пространство картинкой
Для img выставить свойства

img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

2. Не заполнять
Добавить блок, который будет подстраиваться под высоту картинки.

.block_img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
  overflow: hidden;
}
$('.block_img').each(function(){
  var imgHeight = $(this).find('img').height();
  $(this).height(imgHeight);
});

Answer 2

Уберите поля у изображений и используйте border-radius: 5px;

Answer 3

Надо прописать в коде: style border-radius: 5px;. Можно также 5%, но это уж грубо.