it-swarm.com.ru

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

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

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

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

Спасибо! 

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

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

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

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

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

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

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

99
Nick Ginanto

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

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

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

Я также рекомендовал бы использовать все свойства 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%;
}
21
javidazac

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

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

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

Спасибо

4
Sumith Harshan

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

4
OB7

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

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

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

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

4
Abhishek Goel

Два года опаздывают на этот пост, но ... Вы ограничены использованием тега <img>

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

Это не end all be для отзывчивых изображений, но это начало. Кроме того, попробуйте поиграться с 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>
2
Beck

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

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

2
btevfik

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

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

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

img { max-width: 100%; }
1
pixel 67

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

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

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

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

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

0
Gajendra Jena