Адаптивный веб-дизайн - Фото
Используйте атрибут ширины
Если ширина атрибута устанавливается на 100%, то картина будет осуществляться в соответствии с верхним и нижним диапазоном чувствительных функций:
Следует отметить, что в приведенном выше примере, изображение будет больше, чем его исходное изображение. Мы можем использовать не более ширины атрибута хорошее решение этой проблемы.
Использование Max-свойство ширины
Если максимальная ширина свойство устанавливается на 100%, картина никогда не будет больше своего первоначального размера:
Добавьте страницы изображения
фон изображения
Фоновое изображение может реагировать на изменение размера или масштабирования.
Ниже приведены три различных метода:
1. Если свойство фон-размер установлен в положение "содержать", фоновое изображение будет соотношение адаптивная область содержимого. Фотографии сохранить его пропорции без изменений:
Это код CSS:
примеров
ширина: 100%;
высота: 400px;
Фоновое изображение: URL ( 'img_flowers.jpg ');
фон-повторить: не повторять;
фон-размер: содержать;
границы: 1px сплошной красный;
}
Попробуйте »
2. Если свойство фон-размер установлен в положение "100% 100%", фоновое изображение будет расширена, чтобы охватить весь регион:
примеров
Это код CSS:
ширина: 100%;
высота: 400px;
Фоновое изображение: URL ( 'img_flowers.jpg ');
фон-размер: 100% 100% ;
границы: 1px сплошной красный;
}
Попробуйте »
3. Если свойство фон-размер установлен в положение "покрывать", фоновое изображение расширяется, чтобы быть достаточно большим, чтобы полностью покрыть фон так, чтобы область фоновое изображение. Обратите внимание, что свойство остается пропорции изображения, поэтому какая-то часть фонового изображения не может быть отображена в области фона позиционирования.
Это код CSS:
примеров
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Попробуйте »
Различные устройства показывают иную картину
Большие изображения могут отображаться на большом экране, но они не показывают хорошо на маленьком экране. Нам не нужно, чтобы загрузить небольшой экран на большой картине, так что это влияет на скорость загрузки. Таким образом, мы можем использовать медиа-запросы, в зависимости от устройства для отображения другого изображения.
Следующая большая картинка и маленькая картинка будет отображаться на различных устройствах:
примеров
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Попробуйте »
Вы можете использовать запросы средств массовой мин-устройства ширина заменителем мин-ширина атрибута, он будет определять ширину устройства вместо ширины браузера. Сбросить размер окна браузера, размер изображения не изменяется.
примеров
тело {
Фоновое изображение: URL ( 'img_smallflower.jpg ');
}
/ * Устройство больше 400px (также равно): * /
@media только экран и (мин-устройство -width: 400px) {
тело {
Фоновое изображение: URL ( 'img_flowers.jpg ');
}
}
Попробуйте »
HTML5 элемент <изображение>
В HTML5 <picture> элемент может быть задано несколько изображений.
Поддержка браузеров
| элемент | |||||
|---|---|---|---|---|---|
| <Фото> | Не поддерживает | 38,0 | 38,0 | Не поддерживает | 25,0 |
<picture> элемент похож на <video> и <audio> элементы. Различные устройства могут быть ресурсы, ресурс первый набор предпочтительного использования:
примеров
<Источник srcset = "img_smallflower.jpg" медиа = "(макс-ширина: 400px)">
<Источник srcset = "img_flowers.jpg">
<Img SRC = "img_flowers.jpg" ALT = "Цветы">
</ Фото>
Попробуйте »
srcset свойство должно быть определение ресурса изображения.
media - атрибут является необязательным, в медиа - запросы CSS @media править подробности см.
Не поддерживает <picture> элементы браузера можно определить <img> вместо элемента.