Вопросы Теги

Создайте круговой аватар из прямоугольного изображения, сохраняя пропорции и просто используя центр изображения

Есть ли проблема производительности здесь, или это просто оскорбляет ваше чувство правильности? Многие процессы записывают временные файлы и удаляют их, и часто они никогда не попадают на диск из-за кэширования.

Временной файл автоматически удаляется при закрытии. Вот в чем его природа.

Есть только два способа создать zip-файл в памяти и обслуживать его, и оба они, вероятно, больше проблем, чем они того стоят.

  • использовать ram диск.
  • изменить класс ziparchive, чтобы добавить метод, который делает все, что делает метод close (), за исключением того, что фактически закрывает файл. (Или добавьте параметр отпускания для закрытия ()). Это может быть даже невозможно в зависимости от базовых библиотек C.
22
задан user3086854 31 October 2014 в 18:16
поделиться

2 ответа

Другое решение - установить размеры для img и использовать «object-fit: cover;». Он будет работать так же, как «background-size: cover», не мешая фоновым изображениям. 

img {
  object-fit: cover;
  border-radius:50%;
  width: 150px;
  height: 150px;
}
<img src="http://i.stack.imgur.com/Dj7eP.jpg" />

Я нашел это на пост Криса Нейджера. - 1

Редактировать: как упоминалось @prograhammer, это не работает в IE. Edge поддерживает это только для тегов <img>.

Частичная поддержка в Edge относится к object-fit только поддержке <img> - 2

Редактировать 2: Этот пост Приможа Cigler показывает, как использовать Modernizr для добавления резервной поддержки IE, но в этом случае вам потребуется добавить обертку для de image.

22
ответ дан Nitsan Baleli 31 October 2014 в 18:16
поделиться

Еще одним решением является простой класс CSS для элемента img: 

.avatar {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}

Использование: 

<img class="avatar" src="http://path.to/image.jpg" />
1
ответ дан Jacek Gralak 31 October 2014 в 18:16
поделиться