Я замечаю, что мой код реагирует на то, что если я уменьшу его до размера телефона или планшета - весь текст, ссылки и значки социальных сетей соответственно масштабируются.
Однако, ЕДИНСТВЕННАЯ вещь, которая не делает, является моим изображением в теле; который заключен в теги абзаца... с учетом сказанного, есть ли простой способ сделать изображение также адаптивным?
Вот код, который я использовал для отображения своего изображения в теле:
<body>
</center>
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
</center>
</body>
Вы можете попробовать сделать
<p>
<a href="MY WEBSITE LINK" target="_blank">
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</a>
</p>
Это должно масштабировать ваше изображение, если в жидкой макет
Для отзывчивости (то есть ваш макет реагирует на размер окна) вы можете добавить класс к изображению и использовать запросы @media в CSS для изменения ширины изображения.
Обратите внимание, что изменение высоты изображения будет мешать соотношению.
Ширина: 100% сломает его, когда вы просматриваете более широкий.
Ниже приведен пример Bootstrap img-отзыв
max-width: 100%;
display:block;
height: auto;
Я также рекомендовал бы использовать все свойства 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%;
}
Я использую эту технику, чтобы сделать логотип максимально удобным для мобильных устройств. Размер логотипа изменится автоматически.
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;
}
Чтобы сделать все изображения на вашем сайте отзывчивыми, не меняйте встроенный 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 или ваши изображения не будут правильно масштабироваться.
Вы можете настроить класс img и свойство max-width:
img{
width: 100%;
max-width: 800px;
}
max-width важна. В противном случае ваше изображение будет слишком масштабным для рабочего стола. Нет необходимости height свойство height, потому что по умолчанию это автоматический режим.
Если вы ограничены использованием <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>
Установите высоту или ширину изображения в% 100.
Есть еще вопрос в переполнении стека. Как я могу автоматически изменить размер изображения, чтобы он соответствовал контейнеру div? ,
Чтобы сделать изображение чувствительным, используйте следующее:
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">
Изображения должны быть установлены следующим образом
img { max-width: 100%; }
Используйте Bootstrap, чтобы освободить ваши изображения, как показано на рисунке. Используйте класс img-responseive, и все готово:
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
Вместо добавления CSS, чтобы сделать изображение адаптивным, добавление изображений с различным разрешением по сравнению с другим разрешением экрана сделало бы приложение более эффективным.
Мобильные браузеры не должны иметь того же изображения с высоким разрешением, которое требуется для настольных браузеров.
Используя SASS, легко использовать разные версии изображения для разных разрешений, используя медиа-запрос.