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

Имеются изображения разных размеров(ширина, высота), которые выводятся с помощью <img src="">. Данное изображение мне нужно уменьшить до 64px(width,height). Указываю как <img src="" width="64px" height="64px"> работает. Но изображения разных размеров уменьшаются как попало. То сжатые, то приплюснутые. Как сделать так, чтобы сохранились пропорции изображения при 64px height и width?
Присутствует Bootstrap 3
  • Вопрос задан
  • 60584 просмотра
Решения вопроса 1
black_wolf1894
@black_wolf1894
Junior Front End Developer
Пригласить эксперта
Ответы на вопрос 4
Правильно - не изменять. За исключением редких специальных случаев, изображение должно отдаваться сервером в нужном размере.
Ответ написан
Комментировать
@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 кстати.
Ответ написан
Комментировать
RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
На самом деле что бы получить более менее правильные пропорции картинки то нужно писать скрипт который на стороне сервера просчитает пропорции под твой размер обркжет картинку и отдаст тебе готовую твоих размеров, но в любом случае этот метод использовать только в том случае если тебе нужно обработать очень много изображений разных пропорции , так как он не даст желаемого результата.
Ответ написан
@PevelMelnik
Что бы были пропорции попробуй указать максимум
max-width:64px, max-height:64px;
Если картинка в файле css подключаешь то ставь размер
background-size:64px;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы