Закругление прямоугольной картинки

1439
26 ноября 2016, 09:16

Имеется картинка 400x200px. Необходимо ее закруглить, ширина и высота должна быть равна 60px. При этом картинка не должна растягиваться по высоте, в этом случае растягивается( <div><img src="1.png"></div>

div {
    width: 60px;
    height: 60px;
}
img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
}
Answer 1

Если background-image с background-size:cover не хватает и нужен именно img, можно сделать так:

div {  
  position: relative; 
  overflow: hidden; 
  border-radius: 50%; 
  width: 60px; 
  height: 60px; 
} 
 
div img { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: auto; 
  height: 100%; 
  transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%); 
  -webkit-transform: translate(-50%, -50%); 
}
<div> 
  <img src="https://placekitten.com/400/200"> 
</div>

К сожалению, стили будут работать лишь для горизонтальных изображения (вроде 400×200), для вертикальных понадобится поменять местами auto и 100% у width и height. Не знаю, поправимо ли это.

На всякий случай, вариант с background-size:cover:

div { 
  border-radius: 50%; 
  width: 60px; 
  height: 60px; 
  background: url("https://placekitten.com/400/200") no-repeat center center; 
  background-size: cover; 
}
<div></div>

READ ALSO
Как изменить клас через медиазапрос?
CSS

Как изменить клас через медиазапрос?

В бутстрапе есть встроенный класс для вертикального и горизонтального расположения группы кнопок, нужно сделать в мобильном виде кнопки...

 1402
Как правильно поставить превдокласс
CSS

Как правильно поставить превдокласс

Селектор должен работать по логики вещей, этот селектор гласит: применять li относящегося ко всем UL кроме того что с классомq77

 1457
Переход на flexbox
CSS

Переход на flexbox

Делаю теги для сайтаРаньше использовал display: inline-block

 1583
div Блок имеет свой контент, но его высота 0
CSS

div Блок имеет свой контент, но его высота 0

Доброго дня! Столкнулся с такой проблемойИмеется блок для слайдера, он имеет контент, но его высота все равно равна нулю, если не задать ее фиксированно,...

 818