Просмотров: 1 070

Добавляем на веб-страницы изображения, которые будут адаптированы под мобильные устройства.

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

Итак, имеем код страницы, в которой добавлено изображение:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Шаблон одноколоночного макета страницы, адаптированного под мобильные устройства.</title>
<style>
     body{
         font-size: 16px;
         font-family: Candara, Trebuchet MS, Arial, Sans-serif;
     }
     .container{
         max-width: 900px;
         width: 90%;
         margin: 25px auto;
         background: #e3e3e3;
         padding: 15px;
     }
</style>
</head>
<body>
<div class="container">
     <h1>Шаблон одноколоночного макета страницы, адаптированного под мобильные устройства.</h1>
<p><img src="img.png" width="500px"></p>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus!
 </p>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus!
     </p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
</body>
</html>

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

//webgyry.info/home/css/verstka-sayta-pod-mobilnyie-ustroystva/pravilo-1-dlya-adaptivnoy-mobilnoy-verstki-nikakih-absolyutnyih-razmerov/

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

Давайте разберемся, как можно устранить эту проблему.

Здесь нам в этом опять же поможет свойство max-width и задание ширины в процентах.

Вот как измениться исходный код для изображения:

<p><img src="img.png" style="width:90%; max-width:500px;"></p>

Смотрим, как это работает теперь:

Уже намного лучше.

Теперь остается только выровнять изображение по центру:

<p style="width:90%; margin:auto;  max-width:500px;"><img src="img.png" style="width:90%; max-width:500px;"></p>

Ну, вот. Теперь мы имеем страницу с изображением, которая автоматические адаптируется под ширину экрана браузера.