Как сделать изображение отзывчивым без javascript?

-2

Существует множество способов реализации чувствительных изображений на веб-страницах. Однако все решения, с которыми я столкнулся, используют JavaScript. Как реализовать отзывчивые изображения без использования JavaScript? Можем ли мы внедрить очиститель изображения с помощью CSS.Как сделать изображение отзывчивым без javascript?

ОБНОВЛЕНИЕ Я сделал некоторое исследование, прежде чем публиковать этот вопрос. - - https://github.com/scottjehl/picturefill - http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ - http://css-tricks.com/which-responsive-images-solution-should-you-use/

источник

2013-10-24 Anup Khandelwal

Ваш вопрос немного расплывчатым. Не могли бы вы описать, что вы пытаетесь выполнить чуть подробнее? – Kehlan

Почему вы не хотите использовать JavaScript –

Определите «отзывчивые изображения». Вы хотите, чтобы серверные версии изображений более низкого качества отображались в браузерах/устройствах с меньшим/низким разрешением для экономии полосы пропускания или просто хотите масштабировать изображение на стороне клиента? Или что-то другое? –

Невероятно простой. Просто используйте ширину на основе%, и изображение заполнит XX% своего контейнера.

Установите ширину контейнера% на всю упаковку на основе размера видового экрана.

Примечание: не совместимо с типом HTML5. Если HTML5, используйте объявление CSS width:50%;, как предлагает Markus в комментариях.

<img src="file.jpg" width="50%" alt="caption" />

источник

2013-10-24 18:42:49

Вы также можете использовать css 'width: 50%;' –

Добавление этого в CSS сделать изображение, чтобы всегда иметь высоту в соответствии с размером контейнеров

img 
{ 
height:100%; 
width:100% 
}

источник

2013-10-24 18:44:24 Rex

Как сделать изображение отзывчивым без javascript?

ответ

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