CSS3/HTML5 Отзывчивые изображения

Я хочу использовать изображения разных размеров в зависимости от размера веб-страницы. Например, мои изображения имеют два различных размеров:CSS3/HTML5 Отзывчивые изображения

<img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img>

Изображения данных малы имеет ширину 100 пикселей.

@media (max-width:600px) { 
    img[data-small] { 
     content: attr(data-small, url); <-- not working 
     /*width:10px;*/ <-- this would work 
    } 
}

Я testet его на Firefox 37.0.1, Chrome 42.0.2311.90 м и IE 11

Если изменить размер браузера в очень малой ширины (< 600px), изображение все еще то же самое.

источник

2015-04-22 anguish

Разве это не то, что [HTML5 картинка] (http://html5hub.com/html5-picture-element /) предназначен для решения? Или [srcset] (https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)? –

@ChristianVarga: ДА, но на самом деле есть и недостаток поддержки [смотрите на это] (http://caniuse.com/#search=picture) –

Чем больше ширина '100%' и 'height: auto; '. – Vinc199789

-2

Использование:

content: url(attr(data-small));

источник

2015-04-22 07:52:57 Thargor

Не работает для меня. :( – anguish

содержание атр используется в: до и: после selectror. Как всегда вы можете использовать медиа-запрос.

<img src="images/img1.jpg" class="big_image" alt=""> 
<img src="images/img1small.jpg" class="small_image" alt="">

и CSS будет

@media (max-width:600px) { 
    .small_image{ display:block } 
    .big_image{ display:none } 
} 

@media (min-width:601px) { 
    .small_image{ display:none } 
    .big_image{ display:block } 
}

источник

2015-04-22 07:58:38

Я использую этот способ, но есть один недостаток этого способа: вам нужно загрузить 2 изображения. Для людей, которые используют данные на своем телефоне, им нужно загрузить одно большое изображение без пользы в их случае – Vinc199789

@ Vinc199789, если изображение установлен на 'display: none', он не должен загружаться. Можете ли вы привести пример, в котором изображение с индикацией' display: none' загружается? –

Вы также можете использовать jQuey для этого. Посмотрите мой пример - https: // jsfiddle.net/Ljn27au8/ Обычно вы увидите изображение 400x400. Затем измените размер вашего браузера (уменьшите его) и обновите результат, вы увидите другое изображение. –

теги изображений работа с использованием атрибута src. Чтобы изменить изображение, вам нужно изменить атрибут src, который вы не можете сделать с помощью CSS.

content: attr(data-small, url); не изменяет атрибут src. Вы устанавливаете content элемента в атрибут data-small, который ничего не делает на теге img. Как я уже упоминал, вы не можете изменить атрибут src с помощью CSS.

Я бы посоветовал использовать srcset. Это будет изящно деградировать в старых браузерах и будет хорошо работать в новых браузерах.

<img src="images/img1small.jpg" srcset="images/img1big.jpg 600w" alt="" />

В противном случае решение пользователя1936285 также хорошо работает.

источник

2015-04-22 08:05:10

oke srcset работает над Firefox 37.0.0.1, если я разрешаю dom.image.srcset.enabled, а также на Chrome 42.0.2311.90 м, в IE он не поддерживается – anguish

, также не работающий на новейших сафари и хром в iphone. :( – anguish

@anguish Да, это плохо поддерживается: http://caniuse.com/#feat=srcset. Но это как раз то, что работает в браузерах, которые его поддерживают, и изящно деградирует в браузерах, которые не поддерживают Это изящная деградация подталкивает веб-вперед, переоснащение удерживает ее. –

Может быть, вы можете использовать CSS background-image: url("image.png") вместо <img>

Что-то вроде этого:

@media (max-width:600px) { 
    .container{ background-image: url("imagebig.png") } 
} 

@media (min-width:601px) { 
    .container{ background-image: url("imagesmall.png") } 
}

WebPlatform CSS backgrounds

источник

2015-04-22 08:59:36 UberKaeL

CSS3/HTML5 Отзывчивые изображения

ответ

Смежные вопросы