Изображение обрезается при максимальной ширине

Question

Нижний колонтитул этого WP-сайта имеет 3 изображения логотипа: исходные размеры изображения очень разные, поэтому я хочу ограничить его max-width и max-height, которые я вставил в wp-image-490класс:

Но когда я делаю это, после уменьшения размера окна изображение обрезается:

Как это исправить?

Answer 1

Проверьте, можете ли вы добавить другой класс (или идентификатор) для вашего первого логотипа, которого нет у вашего второго и третьего логотипа.

Затем для этого класса (или идентификатора) добавьте правило

<your class/id> {
    width: 100%;
}

(как указано выше номинал Теа )

Answer 2

Решил упомянутую проблему, вставив в класс следующие элементы:

.wp-image-490 {
    object-fit: contain; /* fix the image distortion caused by "width: 100%" */
    width: 100%; /* fix the image cropping caused by "max-width" */
    max-height: 200px;
    max-width: 350px;
}

Answer 3

Попробуйте обновить свой CSS с кодом ниже

CSS

.wp-image-490 {
    width: 100%;    /* Newly added */
    max-height: 200px;
    max-width: 350px;
}