Responsive header image - изменить изображение с помощью css

0

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

Например: show normal img, когда ширина экрана больше 800 пикселей, и когда вы переходите ниже 800px, замените img на другой.

Благодарю!

  • 0
    взгляните на api.jquery.com/resize , событие для изменения размера окон
  • 0
    Я предпочел бы не использовать JavaScript, хотя ..
Теги:
image
responsive-design

3 ответа

3
Лучший ответ

Вы можете использовать мультимедийные запросы CSS3 для достижения гибкого веб-дизайна.

Предположим, у вас есть заголовок с идентификатором: headerID

default css:

 #headerId {
        background: url("default-image-url.png");
    }

Затем вам просто нужно добавить в свой CSS файл следующее:

@media (max-width: 800px) {
    #headerId {
        background: url("different-image-url.png") !important;
    }
}

Затем в вашем HTML в <head> add

<meta name="viewport" content="width=device-width">
Поделиться
  • 0
    Кажется, весь сайт "съедает" баннер сейчас. Я имею в виду, что весь контент сайта вырос там, где раньше был img.
  • 0
    Вам нужно указать высоту и ширину для заголовка. Я упомянул только про фоновое изображение. Оставшуюся высоту и ширину нужно указать
Показать ещё 6 комментариев
0

С JQuery это будет:

if ($(window).width() < 800) {
   $('#divID').css("background-image", "url(/myimage.jpg)");
   //image when windows is less than 800px  
}
else {
   $('#divID').css("background-image", "url(/myimage.jpg)");
   //image when windows is more than 800px  
}
Поделиться
  • 0
    Как и в большинстве ситуаций, jQuery здесь не нужен
  • 0
    @JonathonBlok, но jQuery совместим с любым браузером. Я думаю, что min-width / max-width несовместимо со старыми версиями IE
Показать ещё 1 комментарий
0

Вы не можете сделать это с помощью одного <img> если вы не используете javascript.

Чтобы использовать только CSS, вам нужно использовать фоновые изображения, как говорит mohamedrias, или иметь два изображения и показать или скрыть их, основываясь на ширине экрана, используя медиа-запрос:

@media (max-width: 800px) {
    #headerImg1 {
        display: none;
    }
    #headerImg2 {
        display: block;
    }
}

@media (min-width: 801px) {
    #headerImg1 {
        display: block;
    }
    #headerImg2 {
        display: none;
    }
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню