1

Вставил в вёрстку картинку через тег img. Сам файл картинки большого разрешения. Мне нужно, чтобы картинка была

height: 48px;
width: 88px;

Я эти стили в CSS и указал. А картинка сжалась и выглядит плохо и с другими картинками, которым я указал высоту и/или ширину меньше, чем у оригинального файла, падает разрешения и они выглядят "мыльно". Что мне делать, что картинки не выглядели мыльными на разных разрешениях?

В моей вёрстке картинка вот так выглядит: [![введите сюда описание изображения][1]][1] [1]: https://i.stack.imgur.com/V71mI.png

Хотя сам файл разрешением 300*185, т.е. большего, чем мне нужно. Если не указывать в CSS ширину и/или высоту для тега img, то картинка выглядит на своё разрешение и занимает больше места в вёрстке, чем должна.

2
  • ну я может и ошибаюсь, но если у вас картинки 300*185, при пропорциональном уменьшении до 88px, высота должна быть 54-55px. Но не 48, как вы указали. 12 фев 2021 в 20:06
  • Konstantin, картинка будет мыльной, тк вы задаете фиксированную ширину и высоту. (Ниже представлен ответ, как сделать пропорциональную картинку с одним из задаваемых размеров). Если вам нужно именно такие размеры картинки, то вам нужно найти более подходящую картинку. 13 фев 2021 в 15:40

1 ответ 1

2

Вы непропорционально уменьшаете размер картинок, попробуйте так - img { display: block; max-width: 88px; height: auto }

3
  • Я добавил ваш код. Всё равно картинка выглядит размыто. Если не ограничивать высоту и ширину картинки, то тег становится в несколько раз больше и картинка выглядит хорошо.
    – Alexei
    12 фев 2021 в 22:42
  • 1
    а вы проверяли, может эти картинки (или их родитель) подтягивают какие-то ненужные стили? у вас нет ссылочки чтоб посмотреть?
    – emptyman
    12 фев 2021 в 23:15
  • geor-cpu.github.io/top-3d-shop Я говорю про 2 картинки рядом с поиском
    – Alexei
    14 фев 2021 в 20:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.