Масштабирование картинок для смартфонов

[Katerina23]

Мне тут не давно помогли сделать отображение записей три в ряд. И в стилях заметила вот такой код:

.card__description > :first-child {
    margin-top: 0;  
  }

Мне нужно, то же сделать сравнение если масштаб картинки больше размер экрана смартфона, то установить для картинок width:100%. Если же не больше то оставить как есть. Дело в том, что у меня в тексте встречаются много картинок и не все нужно масштабировать?

[mrnobody]

img {
  max-width: 100%; /* максимальная ширина не больше ширины родительского блока */
  height: auto; /* пропорциональное масштабирование картинки по высоте */
  vertical-align: middle; /* убирает ненужный отстут у картинки, т.к. она строчно-блочный элемент. Либо можно задать `display: block;` */
}

 

[Katerina23]

Использовала этот код для iframe. Документ внутри iframe не помещается весь, а появляются полосы прокрутки. Как сделать, чтобы на мобильных устройствах он помещался без полос прокрутки?

<iframe id="ifr" src="/page.html" width="800" height="600" frameborder="0"></iframe>

стили

#ifr{max-width: 100%; height: auto;vertical-align: middle;}

 

[mrnobody]

По умолчанию у iframe'ов размеры 300×150 px. Вам нужно c помощью JS найти  высоту документа внутри фрейма, и потом задать ее самому фрейму.