Как правильно изменять размер изображений с помощью CSS/HTML?

Question

[denn]

Имеются изображения разных размеров(ширина, высота), которые выводятся с помощью <img src="">. Данное изображение мне нужно уменьшить до 64px(width,height). Указываю как <img src="" width="64px" height="64px"> работает. Но изображения разных размеров уменьшаются как попало. То сжатые, то приплюснутые. Как сделать так, чтобы сохранились пропорции изображения при 64px height и width?
Присутствует Bootstrap 3

Answer 1

[Тимофей Белоусов]

Вот посмотри

Comments

[suberg]

Если указаны width и height в html - то не работает

[Тимофей Белоусов]

Антон Якунов: ну ясное дело, приоритеты никто не отменял, пихни импорт и будет чудо....

Answer 2

[Александр Маджугин]

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

Answer 3

[Tashiro]

если только img тогда надо определится что важнее высота или ширина картинок
в стилях им
display: inline-block \ block;
width: 64px(auto);
height: auto(64px);
в первом случае приоритет ширины, во втором высоты будет.
я, как правило, использую в таких случаях блок с заданными размерами style="background: url(img.jpg) center center;"
можно еще поиграться с background-size
а вообще Suntechnic прав, пережимайте фотки под нужные контейнеры на стороне сервера и в кеш их
в бутстрапе 3 есть класс img-respontive кстати.

Answer 4

[Игорь Пушкарский]

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

Comments

[Тимофей Белоусов]

зачем усложнять жизнь? Если можно это реализовать на css3 jsfiddle.net/5ht9o30u/2

Answer 5

[PevelMelnik]

Что бы были пропорции попробуй указать максимум
max-width:64px, max-height:64px;
Если картинка в файле css подключаешь то ставь размер
background-size:64px;