Я хочу, чтобы изображение на моем сайте полностью изменилось при изменении размера браузера.
Я использую медиа-запросы, но я не могу понять это правильно. Есть мысли/советы?
Я хочу, чтобы изображение на моем сайте полностью изменилось при изменении размера браузера.
Я использую медиа-запросы, но я не могу понять это правильно. Есть мысли/советы?
В будущем добавьте код, который вы пробовали.
если это тег image
, вы можете использовать класс. Скрыть второе изображение при загрузке страницы и показать + скрыть изображение 1 при определенном размере экрана, например:
HTML
<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>
CSS
.image2{
display: none;
}
@media only screen and (max-width: 500px){ //some value
.image1{
display: none;
}
.image2{
display: block;
}
}
Если это a background-image
, вы можете просто поменять изображение:
HTML
<div class="example"></div>
CSS
.example{
background-image: url("example.jpg");
}
@media only screen and (max-width: 500px){ //some value
.example{
background-image: url("example2.jpg");
}
}
Это можно сделать с помощью элемента picture
HTML5, который не требует CSS для изменения элементов img
в указанных медиа-запросах. Если вам интересен этот подход, знайте, что его поддержка браузера НЕ включает IE, хотя для старых браузеров есть полифилл.
<h1>Resize Window</h1>
<picture>
<source srcset="https://placehold.it/1400x1400" media="(min-width: 1400px)"/>
<source srcset="https://placehold.it/1200x1200" media="(min-width: 1200px)"/>
<source srcset="https://placehold.it/800x800" media="(min-width: 800px)"/>
<source srcset="https://placehold.it/600x600" media="(min-width: 600px)"/>
<img src="https://placehold.it/400x400" alt="example"/>
</picture>
Вы можете использовать свойство content
для вставки изображения. Однако изображения, подобные этому, могут быть сложными для стиля. (Выполнить фрагмент кода во весь экран перед изменением размера браузера)
@media screen and (max-width: 479px) {
div img {
display:none;
}
div::before {
content: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66");
}
}
<p>Resize this window to see image change</p>
<div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="200px" />
</div>
Ответ от jmore009 очень полезен для моего требования, но мне нужно уточнить. На моем сайте размещен баннер, ориентированный на верх страницы, который с шириной 600 пикселей слишком широк для мобильных телефонов. Поэтому мне нужно было иметь изображение размером 600 пикселей и заменить более узкое изображение размером 310 пикселей для видовых экранов мобильных телефонов. После внесения изменений в код jmore009 я перешел к следующему коду, который работает (и проверяет):
HTML 4.01 код:
<div class="centered">
<img src="images/short_banner.gif" alt="MYSITE.COM" class="image2">
<img src="images/long_banner.gif" alt="MYSITE.COM" class="image1">
</div>
Код CSS 3.0:
.image2{
display: none;
}
@media only screen and (max-width: 600px)
{
.image1 {
display: none;
}
.image2 {
display: block;margin:0 auto;
}
}
Я не мог получить короткий баннер по центру без использования DIV. HTML выглядит неловко, и должен быть лучший способ выразить HTML-код. Ваши комментарии будут оценены. (Увы, я не смог набрать больше очков, потому что я ниже 15 очков.)