alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


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

Категория: Адаптивная верстка Просмотров: 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. Одиночные адаптивные изображения.

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

<img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O8TEBS7OBU.jpg" width="700px"">

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

</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 и медиа запрос для мобильных устройств. С помощью нескольких медиа запросов можно создавать галереи для всех видов устройств. На этом все, в следующей статье расскажу, как создать адаптивное фоновое изображение.


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

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



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


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

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

Облако тегов