Одиночное адаптивное изображения

Категория: Адаптивная верстка Просмотров: 3863 Коментариев: 0 Дата: 2017-02-11 Добавил: admin

В этой статье Вы узнаете, как сделать адаптивные изображения с помощью CSS. Это позволяет нам сделать изображения на страницах сайта гибкими и корректно отображающимися на различных экранах пользовательских устройств. Для адаптации используются процентные значения для ширины width и значения auto для высоты height.

1. Одиночные адаптивные изображения.

Первое, что мы рассмотрим, это одиночные картинки в записях или блоках, которые будут полностью адаптивными, находясь между текстом сверху и снизу.

Для этого задаем следующие свойства для картинки img: Максимальную ширину для картинки - max-width: 100%; Высоту картинки устанавливаем в авто - height: auto; .

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    
</head>
<body>

1. Одиночные адаптивные изображения.

Одиночное адаптивное изображение. Одиночное адаптивное изображение. Одиночное адаптивное изображение. Одиночное адаптивное изображение. Одиночное адаптивное изображение. Одиночное адаптивное изображение. Одиночное адаптивное изображение. Одиночное адаптивное изображение.

</body>
</html>

Проверить то, что получилось можно следующим образом: взять правый нижний угол браузера и сдвигать его левую сторону экрана. Как видно картинка доходит до минимального размера, а затем просто сужается и не вылезает за границы экрана.

2. Одиночные адаптивные изображения с обтекающим текстом.

Второе, это рассмотрим случаи, когда текст обтекает картинку.

Для этого, к уже имеющимся свойствам картинки, добавим такие свойства как: display: block; и float: left; . Как мы уже знаем, float: left; выравнивает нашу картинку по (относительно) левому краю и задает обтекание нашей картинки с правой стороны.

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    
</head>
<body>

2. Одиночные адаптивные изображения с обтекающим текстом.

</body>
</html>

Как видно, на 2-м примере картинка занимает ширину 45% от экрана браузера и с правой стороны ее обтекает текст. Обтекаемый текст сильно прижат к изображению, что вынуждает использовать отступы: margin: 0 20px 20px 0; . для блока с картинкой .container2 img

Все, казалось бы, хорошо, но когда сжимаем экран браузера до малых размеров то картинка становится очень маленькой, что крайне не удобно да и смотрится уже не совсем красиво. Чтобы это исправить нужно, для того же блока с картинкой .container2 img задать минимальную ширину изображения min-width: 300px; . В таком случае при уменьшении экрана изображение, дойдя до 300px, перестанет уменьшаться и будет оставаться постоянным. В итоге вот что должно получиться:

CSS

Но на этом еще не все, есть еще одна проблема. Когда сжимаем браузер до определенного размера, то текст обтекающий картинку становится не читабельным, так как между браузером и картинкой помещается одно максимум два слова. Для того что бы это исправить используем медиа запросы, для максимального размера экрана в 480px, делаем картинку не обтекающей и следовательно задаем float: none; , (как подключать медиа запросы можно найти тут). Так же, в медиа запросе нужно задать автоматическую ширину width: auto; и максимальную ширину max-width: 100%;, чтобы изображение не вылезало за блоки контейнера.

CSS

3. Адаптивные картинки в колонках.

Третье, - это рассмотрим пример адаптирования сразу нескольких картинок и, при этом, расположим их в колонки одна рядом с другой.

Чтобы все это реализовать, для блоков .container3 img , .container4 img используются следующие свойства: height: auto; и display: inline-block; , а также задается ширина width: 48%;. Почему задается ширина для 2-х картинок именно в 48% ? Да, чтобы между картинками оставались боковые отступы в 2% и они не сливались одна в другую. Таким же образом поступаем и для блока с 3-мя картинками, для них задаётся ширина width: 32%;

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    
</head>
<body>

3. Адаптивные картинки в две колонки.

3. Адаптивные картинки в три колонки.

</body>
</htmlgt;

4. Адаптивные картинки в колонках под различные устройства.

Четвертое – это рассмотрим различные варианты расстановок адаптивных изображений в зависимости от устройств просмотра.

Сделаем так, чтобы на больших экранах картинки отображались в четыре колонки, на средних в две колонки и на малых экранах в одну колонку. Для этого будут использоваться все те же медиа запросы указывая тип устройства, для которого будет применяться заданный вид отображения.

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    
</head>
<body>

4. Адаптивные картинки в четыре колонки под различные устройства.

</body>
<html>

В примере выше заданы стили для экранов компьютеров, медиа запрос для планшетов ширина экрана которого 780px и медиа запрос для мобильных устройств. С помощью нескольких медиа запросов можно создавать галереи для всех видов устройств. На этом все, в следующей статье расскажу, как создать адаптивное фоновое изображение.

<<< Предыдущий материал

Следующий материал >>>

Просмотреть демо: Демо

Скачать исходник: Скачать

Добавить комментарий:

Апдейты

Рубрики Архивы

Популярное Свежие записи

Облако тегов

WEBTEORETIK