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

Question

Я уже некоторое время ищу решение этой проблемы, но безуспешно.

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

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

Спасибо!

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

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

Answer 1

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

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

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

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

Обратите внимание, что изменение высоты изображения испортит соотношение

Answer 2

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

Следующее - img-отзывчивый Bootstrap

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

Answer 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%;
}

Answer 4

Чтобы сделать все изображения на вашем сайте отзывчивыми, не меняйте встроенный HTML-код с правильной разметки, так как ширина: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. Не забывайте высоту: авто или ваши изображения не будут правильно масштабироваться.

Answer 5

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

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;
}

Надеюсь, это поможет.

Спасибо

Answer 6

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

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

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

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

Answer 7

Два года опоздал на этот пост, но... вы вынуждены использовать <img> тег?

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

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

CSS:

.image-container{
  height: 100%; // doesn't have to be '%' 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>

Answer 8

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

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">

Answer 9

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

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

Answer 10

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

img { max-width: 100%; }

Answer 11

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

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

Answer 12

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

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

С помощью SASS легко использовать разные версии изображения для различного разрешения с помощью медиа-запроса.