Адаптивные изображения

  • 3 Ответов
  • 373 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Адаптивные изображения
« : 24.01.2017, 02:13:46 »
Как сделать так, чтобы все изображения на сайте адаптировались?

*

Оффлайн KKAAZZOO

Re: Адаптивные изображения
« Ответ #1 : 24.01.2017, 03:09:57 »
    /* 1 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */
    img {
      display: inline-block;
      height: auto;
      max-width: 100%;
    }
    /* 2 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */
    img {
      display: block;
      height: auto;
      max-width: 100%;
    }
    /* 3 Способ - Придать адаптивность всем изображениям, расположенных в элементе с id="main". При этом данные изображения будут себя ввести как блочные элементы (block) */
    #main img {
      display: block;
      height: auto;
      max-width: 100%;
    }

Re: Адаптивные изображения
« Ответ #2 : 24.01.2017, 04:31:06 »
    /* 1 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */
    img {
      display: inline-block;
      height: auto;
      max-width: 100%;
    }
    /* 2 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */
    img {
      display: block;
      height: auto;
      max-width: 100%;
    }
    /* 3 Способ - Придать адаптивность всем изображениям, расположенных в элементе с id="main". При этом данные изображения будут себя ввести как блочные элементы (block) */
    #main img {
      display: block;
      height: auto;
      max-width: 100%;
    }

Благодарю!

Re: Адаптивные изображения
« Ответ #3 : 28.02.2017, 16:46:31 »
Достаточно просто прописать img{width:100%}