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

Я замечаю, что мой код реагирует на то, что если я уменьшу его до размера телефона или планшета - весь текст, ссылки и значки социальных сетей соответственно масштабируются.

Однако, ЕДИНСТВЕННАЯ вещь, которая не делает, является моим изображением в теле; который заключен в теги абзаца... с учетом сказанного, есть ли простой способ сделать изображение также адаптивным?

Вот код, который я использовал для отображения своего изображения в теле:

<body>
    </center>
        <p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
    </center>
</body>

Ответ 1

Вы можете попробовать сделать

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

Это должно масштабировать ваше изображение, если в жидкой макет

Для отзывчивости (то есть ваш макет реагирует на размер окна) вы можете добавить класс к изображению и использовать запросы @media в CSS для изменения ширины изображения.

Обратите внимание, что изменение высоты изображения будет мешать соотношению.

Ответ 2

Ширина: 100% сломает его, когда вы просматриваете более широкий.

Ниже приведен пример Bootstrap img-отзыв

max-width: 100%; 
display:block; 
height: auto;

Ответ 3

Я также рекомендовал бы использовать все свойства CSS в файле, отличном от файла HTML, чтобы вы могли лучше организовать свой код.

Чтобы сделать ваш отзывчивым img, я бы сделал:

Сначала назовите ваш <img> используя атрибут class или id в вашем HTML файле:

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

Затем в своем CSS файле я внесу изменения, чтобы сделать его отзывчивым:

.responsive-image {
  height: auto;
  width: 100%;
}

Ответ 4

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

HTML

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

CSS

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}

Ответ 5

Чтобы сделать все изображения на вашем сайте отзывчивыми, не меняйте встроенный HTML-код с правильной разметки, так как width:100% не работает во всех браузерах и вызывает проблемы в Firefox. Вы хотите разместить свои изображения на своем сайте, как обычно:

<img src="image.jpg" width="1200px" height="600px" />

А затем добавьте в свой CSS, что максимальная ширина любого изображения составляет 100% с высотой, установленной на auto:

img {
    max-width: 100%;
    height: auto;
}

Таким образом, ваш код работает во всех браузерах. Он также будет работать с пользовательскими клиентами CMS (например, Cushy CMS), которым требуется, чтобы изображения имели фактический размер изображения, закодированный во встроенный HTML, и на самом деле проще, когда все, что вам нужно сделать, чтобы сделать изображения отзывчивыми, это просто указать в своем состоянии. CSS файл, максимальная ширина которого равна 100%, а для высоты задано значение auto. Не забывайте height: auto или ваши изображения не будут правильно масштабироваться.

Ответ 6

Я использую это все время

Вы можете настроить класс img и свойство max-width:

img{
    width: 100%;
    max-width: 800px;
}

max-width важна. В противном случае ваше изображение будет слишком масштабным для рабочего стола. Нет необходимости height свойство height, потому что по умолчанию это автоматический режим.

Ответ 7

Если вы ограничены использованием <img>:

Я обнаружил, что намного проще установить <div> или любой другой элемент по вашему выбору с background-image, width: 100% и background-size: 100%.

Это еще не все, что нужно для адаптивных изображений, но это только начало. Кроме того, попробуйте поиграться с background-size: cover и, возможно, с позиционированием background-position: center.

CSS:

.image-container{
  height: 100%; /* It doesn't have to be '%'. It can also use 'px'. */
  width: 100%;
  margin: 0 auto;
  padding: 0;

  background-image: url(../img/exampleImage.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}

HMTL:

<div class="image-container"></div>

Ответ 8

Установите высоту или ширину изображения в% 100.

Есть еще вопрос в переполнении стека. Как я могу автоматически изменить размер изображения, чтобы он соответствовал контейнеру div? ,

Ответ 9

Чтобы сделать изображение чувствительным, используйте следующее:

CSS

.responsive-image {
        width: 950px;//Any width you want to set the image to.
        max-width: 100%;
        height: auto;
}

HTML

<img class="responsive-image" src="IMAGE URL">

Ответ 10

Изображения должны быть установлены следующим образом

img { max-width: 100%; }

Ответ 11

Используйте Bootstrap, чтобы освободить ваши изображения, как показано на рисунке. Используйте класс img-responseive, и все готово:

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">

Ответ 12

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

Мобильные браузеры не должны иметь того же изображения с высоким разрешением, которое требуется для настольных браузеров.

Используя SASS, легко использовать разные версии изображения для разных разрешений, используя медиа-запрос.