Tumblr - сделать изображения постов отзывчивыми

Question

Мне удалось выяснить, что нужно сделать, чтобы сделать видео-вставки отзывчивыми (незначительное добавление в таблицу стилей CSS, а некоторые добавление в HTML-кодирование - отлично).

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

</p><figure class="tmblr-full" data-orig-height="332" data-orig-width="1170"><img src="https://66.media.tumblr.com/fbfec10da6006e67fce4be8f5d7343ff/tumblr_inline_pl7kmovAHp1svrcsh_540.png" data-orig-height="332" data-orig-width="1170" alt="image"></figure><p>

Может кто-нибудь помочь мне с этим? Мне не интересны фотосеты или что-то в этом роде. Изображение только изменится, когда оно станет мобильным.

Answer 1

Вы можете использовать опцию max-width для своих img s следующим образом:

<img src="https://66.media.tumblr.com/fbfec10da6006e67fce4be8f5d7343ff/tumblr_inline_pl7kmovAHp1svrcsh_540.png"
  data-orig-height="332"
  data-orig-width="1170"
  alt="image"
  style="max-width: 100%">

Или CSS:

/* On screens that are 1169px or less, set the max-width of img to 100% */
@media screen and (max-width: 1169px) {
  img {
    max-width: 100%;
  }
}