Как правильно отображать фотографии?

Question

[Шамиль Хайрулаев]

Кто может мне объяснить как правильно отображать аватарки пользователей? Проблема в том, что они могут быть абсолютно разных размеров а место, где отображается аватарка имеет конкретный размер. Думаю, вы понимаете, какие тут могут быть проблемы. Мне достаточно просто иметь понятие как это делается. Не думаю, что можно реализовать на чистом css.

Заранее спасибо за ответ. Отвечу на все вопросы, предоставлю всю необходимую информацию.

Comments

[twobomb]

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

[Антон Литвиненко]

Как мне кажется, они должны кропаться на сервере

[Шамиль Хайрулаев]

twobomb, Если ты пойдешь на космодром и посмотришь на то как взлетает ракета, ты поймешь принцип работы ее двигателя?

[twobomb]

Шамиль Хайрулаев, я ничего не пойму даже если мне дадут точные чертежи каждой детали этого двигателя. Но вот когда я открываю любой сайт или большинство програм, то судя по поведению могу предположить что находится внутри и какой алгоритм работы, по крайней мере как это можно реализовать.
У тебя похоже в интернет появился только вчера и ты никогда не регистрировался на сайтах. А я вот например могу привести 3 примера чисто из наблюдения, первый это сайт может загружать только конкретные размеры изображений, например 32х32, 256х256 и т.д. . Второй это сайт сам ресайзит и кропит изображение после загрузки, тоесть пременяет пропоции и берем центр изображения входящий в эти пропорции. Ну и третий новомодный способ, это после загрузки изображения тебе предлагается самому выбрать область изображения которая будет обрезана, передвигая прямоугольник с нужными пропорциями. И все эти выводы я сделал чисто из наблюдения и помоему даже никогда не реализовывал ни один из этих алгоритмов, а может и реализовывал уже не помню.

[Шамиль Хайрулаев]

twobomb, В том-то и дело, что ракетостроитель (или как их там называют) поймет чертежи, в отличии от тебя, потому что он занимается этим очень долго. Точно так же я с небольшим опытом в веб-разработке могу не увидеть того, что можешь увидеть ты, так как, скорее всего, у тебя намного больший опыт.

[Шамиль Хайрулаев]

twobomb, Поэтому я и задаю этот вопрос тут

Answer 1

[valgerofficial]

Да всё просто, делаешь блок с аватаркой, и если в этом блоке будет картинка, растягиваешь ее просто по размеру, не в зависимости от того какого она размера.

.avatar > img {
    width: 100%;
    height: auto;
    display: block;
}

Comments

[valgerofficial]

[Шамиль Хайрулаев]

Спасибо. Для начала и так сойдет

Answer 2

[iBird Rose]

берешь тот же https://fengyuanchen.github.io/cropperjs/ и при загрузке заставляешь юзера выбрать область, которая будет отображаться