Заменить размер изображения с помощью CSS

Question

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

Одна из проблем, которые я получаю, заключается в том, что программное обеспечение блога автоматически добавляет высоту и ширину в пикселях. Это как исходный код выглядит следующим образом:

<div class="leftbox"><img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg" width="400" height="267" alt="Indian tourists" title="Indian tourists" /></div> 

Я хочу использовать CSS, чтобы переписать код изображения с максимальной шириной: 100%, так что в случае, если изображение больше, чем размер экрана, он мог бы зафиксировать в Это.

Кто-то сказал мне поставить следующий код в нижней части файла css темы для темы.

.post_content img { 
height: auto !important; 
max-width: 100% !important; 
} 

Я пробовал этот код, но, к сожалению, он не сработал. Может кто-то, пожалуйста, помогите мне с этим.

Answer 1

если ваш класс DIV будет leftbox, то вы можете использовать следующий код в файле CSS

.leftbox img { 
    height: auto !important; 
    max-width: 100% !important; 
} 

Answer 2

Попробуйте

<div class="leftbox"><img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg"  width="400" height="267" alt="Indian tourists" title="Indian tourists" /></div> 

CSS

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

или добавить этот файл CSS

img[style] { 
    height:auto !important; 
    max-width:100% !important; 
    }