Как в HTML уменьшить картинку и сделать его адаптивным
Опубликованно 29.09.2018 01:48
Делая авто-разработка дизайна, отнестись серьезно к вашим изображениям. Не стоит брать фотографии для только развлекательный контент или декорации. Они действительно украшают ресурса, но также, чтобы усилить эффект статьи и привлечь читателей. Если вы не знаете, это отличный способ продвижения сайта и повышения конверсии. Поэтому сейчас мы будем учиться выбирать изображения и вставлять их в разметке. А как мы поймем, что в html-код, чтобы уменьшить размер изображения, обрабатывать их и добавлять эффекты.
Знакомство с помощью тега img
В языке разметки гипертекста есть специальный тег, который указывает браузеру, что он сейчас получит изображение. Это тег img. Он имеет два поля: src - выбор источника; alt - описание.
В качестве источника можно указать URL-адрес изображения или его веб-адрес. И вы также можете вставлять фотографии, которые находятся на локальном компьютере. В этом случае указывается полный или относительный путь. Например, изображение находится в папке img в папке на диске D. документ с помощью тегов index.html в папке сайт в каталог.
Полный будет:
<img src="D:/working_directory/img/file_name.jpg alt="пресс-фотография "Атлас">
Ключевые слова уточнить, в зависимости от расположения документа, который ссылается на файл изображения:
<img src="../img/file_name.jpg alt="три милых котенка"> <!-- Символ ".." означает выйти из каталогов с заднего вида--> Как уменьшить размер картинки в html
Каждое изображение имеет размер. Как правило, он измеряется в пикселях. Если вы берете файл с высоты 1200 пикселей, ширина 3000, вставить в разметку и откройте в браузере, то в лучшем случае увидите половину фото. И если это делать на планшете с 500px, это будет видно только пятую часть. Все это потому, что браузер загружает полный размер файла. Но с этой задачей легко справиться, если вы знаете, как. В HTML-код уменьшения изображения вам поможет только одно слово - width:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Документ</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <img src="твой стиль/путь/к/было.rd" alt="красочные описания" > </body> </html>
Width-это необязательный, но полезный атрибут. Через width, вы указываете браузеру, какой ширины должна быть размещена изображения. По умолчанию, единицы измерения пикселы. Таким образом, нет необходимости записывать width="250px" для того, чтобы уменьшить изображение. В HTML, как в графических программах, чтобы определить размер, служат интересам, а также rem или em. С помощью атрибута height задает высоту. Если это не в описании, браузер помещает значение: height="auto", что очень удобно.
Адаптация изображений
Смысл адаптации, чтобы сайт хорошо ищет на всех устройствах. С переведу экрана BlackBerry, заканчивая большой мониторов. Но это не означает, что размер фото, необходимо предусмотреть на уровне каждый месяц. В то время как в HTML уменьшить картинку, чтобы она в один месяц, и на мобильные устройства и ноутбуки с компьютерами?
На помощь придет новый атрибут width, только теперь значение, что вы задаете ему исключительно в процентах:
<img src="твой стиль/путь/к/было.rd" alt="красочные описания" width="100%">
Браузер понимать эту запись как признак показать фото на всю ширину экрана. После этого, вы указываете в поставил следующую структуру:
<!--Волшебный тег meta!!!!!---------------------------> <meta name="viewport" content="width=device-width, initial-scale=1">
Тег viewport масштабирование страницы, включая изображения, под экраны навигации. Теперь у нас есть вспышки фото на сайте, которые будут отлично смотреться на всех устройствах.
Блок-контейнер для изображений
Вы не всегда нужно фото в полный экран, в большинстве случаев, размер будет необходимо адаптировать вокруг блоков текста или видео. Тогда тренируйтесь заключить тег img в контейнер div:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Документ</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="img-wrapper"> <img src="твой стиль/путь/к/было.rd" alt="красочные описания" width="100%"> </div> </body> </html>
Теперь, чтобы уменьшить изображение на сайт в html и увеличить его, вам нужно только указать ширину 100%. Размер изображения, теперь полностью зависит от блока контейнера, что вы будете управлять CSS в документе. Например, добавить эффект увеличения фото при наведении курсора:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Документ</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <стиль> .img-wrapper{ display: block; width: 80%; max-height: 50vh; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; } img{ transition: all .5s ease; } img:hover{ transform: scale(2); opacity: .7; } </style> </head> <body> <div class="img-wrapper"> <img src="твой стиль/путь/к/было.rd" alt="красочные описания" width="100%"> </div> </body> </html>
Изображение увеличилось в два раза, но не за блок-контейнер. Теперь вы готовы к использованию изображения. Главное - используйте их в умеренных количествах. Изображения могут значительно повлиять на скорость загрузки. Замените их по возможности фон градиент или CSS-анимации. Автор: Уверен, Что Ася 23 Сентября 2018 Года
Категория: Интернет
