Как в HTML уменьшить картинку и сделать адаптацию
Опубликованно 28.09.2018 02:30
Занимаясь независимой конструкции, серьезно изображений. Не стоит фотографировать исключительно развлекательный контент или сопутствующие декорации. Действительно украшают ресурс, но и увеличить эффекты статьи и привлечь читателей. Если вы не знаете, является отличным способом продвижения сайта и повышения конверсии. Поэтому, сейчас мы научимся правильно выбирать изображения и вставлять их в разметке. И мы также увидим, как в html уменьшить картинку, обработать и добавить эффекты.
Знакомство с тега img
В язык разметки гипертекста имеет метку, которая указывает браузеру, что сейчас появляется изображение. Это тег img. Имеет два обязательных атрибута: src - для указания источника; alt для описания.
В качестве источника можно указать URL-это путь к образу или веб-адрес. И также можно вставить фотографии, которые находятся на локальном компьютере. В этом случае будет полный или относительный путь. Например, изображение находится в папке img в каталог working_directory на диске D. И документ с ярлыками index.html в папку site в том же каталоге, working_directory.
Полностью будет выглядеть следующим образом:
<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%">
Браузер понимать эту запись как признак показать фото на всю ширину экрана. После этого, вы указываете в Mitte следующую конструкцию:
<!--Волшебный тег 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"> <style> .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>
Картинка увеличивается в два раза, но не выходит за пределы блок-контейнер. Теперь все готово для работы с изображениями. Главное - использовать их в меру. Изображения существенно влияют на скорость загрузки. Замените его возможности back-end с полным или CSS анимации. Автор: Поблизости Ася 23 Сентября 2018 года
Категория: Интернет
Как в HTML уменьшить картинку и сделать адаптацию