Медиа-экран css не отображает изображения правильно

Question

У меня есть страница блога KW-Masterointi, где я также добавляю изображения между текстом. По какой-то причине, если я ввожу размеры изображения в HTML, изображение не отображается правильно в мобильном режиме. Я установил изображение max со 100% в моем css, но изображения отображаются корректно только тогда, когда я удаляю размеры изображения из кода HTML.

В настоящее время у меня есть все изображения, кроме одного без размеров. Одно изображение с размерами - FGx.jpg в строке 299. Когда я смотрю на страницу в мобильном режиме, это изображение выглядит смешно. Все остальные отображаются правильно.

Что-то переопределяет {max со 100%} в моем css, но я не смог понять, что это такое.

Любая помощь очень ценится. Thanks Kim

Answer 1

Вам необходимо использовать! Важно в конце стилей в CSS, чтобы переопределить встроенный стиль.

Ex)

.container { 
      width: 100% !important; 
      height: auto; 
    } 

Высота:. Авто; будет гарантировать, что ваши изображения не будут искажены при изменении размера на меньшие экраны.

Answer 2

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