В css размер картинки: css3 — Как изменить размер картинки через CSS?

Leave a Comment / Css / By /

А ваши картинки крадут время?

Загружать большое изображение на мобильный телефон пользователя = проявить к нему неуважение. Как решить проблему неуместных картинок на вашем сайте.

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

В далеком (далеком ли?) прошлом для мобильных сайтов разрабатывалась отдельная, мобильная, версия.

Сейчас все чаще отдается предпочтение адаптивным или отзывчивым интерфейсам.

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

В этой прекрасной сказке есть один отрицательный герой — картинки.

Предположим, на вашем чудесном сайте есть hero image — большой и красивый баннер, привлекающий к себе взгляды посетителей. На компьютере сайт грузится быстро, баннер выполняет свою продающую роль, интерфейс выглядит отлично.

Чтобы картинка адаптировалась под разные экраны вы делаете что-то вроде:

Вес нашей картинки 110 КБ, размеры картинки — 960х539. Она восхитительно смотрится.

Но что произойдет, если ваш сайт открыть, например, на телефоне? Через мобильный интернет? В области?

Чтобы загрузить эту картинку через 3G в Питере, потребуется 3,34 сек. Три с половиной секунды только на картинку, Карл! Спросите себя, а нужен ли вам реальный размер этой картинки на маленьком экране телефона? Отвечу за вас — конечно нет.

Если вам кажется, что это всего несколько секунд и это мелочи, то вспомните, сколько всего на вашей странице помимо картинки: текст, скрипты, реклама, счетчики слежения.

Показать только нужное

Есть кардинальный вариант — вообще не показывать на мобильном устройстве эту картинку.

Есть отличный тест Тафта, который поможет определить, действительно ли важна эта картинка для контента сайта.

Делаем просто:

C первого взгляда проблема решена. Вы даже ощутите, что страница загружается быстрее, если откроете ее на мобильном телефоне. Это происходит за счет того, что браузер экономит время на отрисовке картинки.

Но тут вас будет ждать огромное разочарование — картинка по прежнему скачивается, безжалостно пожирая трафик пользователя.

 

На фоне

Еще один вариант манипуляций предполагает, что картинка у нас будет фоном элемента. Тогда при помощи тех же медиа-запросов мы можем вообще не загружать ее или подменять на более легкий вариант.

Браузер загрузит только ту картинку, которая предусмотрена для текущего разрешения.

Profit!

Но вы потратите довольно много времени на то, чтобы подменять картинки на каждом разрешении. Ваш CSS слегка вспухнет. А рано или поздно кто-то забьет на это (от лени или по незнанию) и на мобильных снова полезут увесистые картинки.

И я уже молчу про вариант, когда действительно нужен , а background вам не подойдет.

 

Решабельно

В нынешней спецификации HTML есть отличное решение нашей с вами проблемы. Умные люди пишут эти спецификации!

Я настаиваю на вашем знакомстве с Отзывчивыми изображениями.

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

Вся эта магия реализуется при помощи дополнительных атрибутов к тегу img.

Так выглядит основной синтаксис, обеспечивающий вам отзывчивые изображения:

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

  • Качественные картинки на ретине.
  • Показ подходящего формата в зависимости от знаний браузера.

 

Живой пример

Примечание: Codepen не очень дружит с отзывчивыми картинками. Аналогичные примеры http://responsiveimages.org/demos/variable-width/index.html и https://googlechrome.github.io/samples/picture-element/

В приведенном примере картинка занимает 700px при ширине экрана больше 700px и 100% ширины при меньших разрешениях.

При этом, если вы откроете этот пример на мобильном телефоне, то браузер загрузит меньшую из версий картинки.  

Вы можете видеть, что адреса картинок указаны в ранее не используемом атрибуте srcset. У этого атрибута следующий синтаксис: srcset=“URL-картинки размер-в-w, URL-картинки размер-в-w”. И так нужное количество раз.

Дальше пишем еще один новый атрибут — sizes. Он содержит в себе информацию о том, сколько места занимает картинка на том или ином разрешении. Для брейкпоинтов используется обычное медиа-выражение. Синтаксис: sizes:”брейкпоинт размер-в-px/vw”. Вы можете перечислить нужное количество брейкпоинтов и задать для каждого размер отображаемой картинки. Можно указать одно значение, например, 100vw. Тогда картинка будет всегда на 100% ширины экрана.

 

Злоупотребление картинками

Советую вам сразу после прочтения этой статьи проверить свой сайт на размеры картинок.

Делаем следующее:

  1. Открываем Chrome в режиме инкогнито.
  2. Открываем Инструменты разработчика (DevTools).
  3. Переходим на вкладку Network, нажимаем Img.
  4. Заходим на наш сайт и видим внизу результат.

 

 

Заключение

Я не рассказала и десятой части о том, как можно решить проблему воровства трафика из-за больших картинок.

Честно скажу, что у меня не было цели написать пошаговую инструкцию. Я поставила себе задачу привлечь ваше внимание к проблеме неуважительного отношения к трафику и времени пользователей. И дала вам подсказки, в какую сторону стоит посмотреть.

В следующий раз, когда будете ставить огромный баннер в начало статьи, пожалуйста:

  • Проведите тест Тафта.
  • Проверьте финальную скорость загрузки.
  • Оптимизируйте изображение (крошечная панда).
  • Используйте новые атрибуты для img.

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

Полезные ссылки:

  • Получаем разные разрешения одной картинки РАЗ и ДВА.
  • Читаем документацию: раз, два, три.
  • Изучаем мануалы: первый, второй, третий.
  • Проверяем поддержку в браузерах.

Оцените статью

Средняя оценка 0 / 5. Всего проголосовало 0

Автоматическое изменение размера изображения для размещения в HTML Div с использованием CSS

Автоматическое изменение размера изображения (img) для размещения в меньшем Div может быть достигнуто с помощью простых CSS или CSS3. В этом уроке я объясню как CSS, так и CSS3, используя простой пример html.

На этой странице

Автоматическое изменение размера изображения с помощью CSS

Автоматическое изменение размера изображения с помощью CSS: #

Чтобы автоматически изменить размер изображения с помощью CSS, используйте приведенный ниже код CSS

Не добавляйте явную ширину и высоту к изображению тег (img).

Затем укажите максимальную ширину и максимальную высоту как 100%. Как показано ниже.

 изображение {
максимальная ширина: 100%;
максимальная высота: 100%
}

Например, допустим, что ширина нашего изображения составляет 100 пикселей, а высота — 100 пикселей.

 
<дел>
<дел>
<дел> png">
<дел>

У нас есть четыре элемента div разных размеров и ширины, высота элементов div применяется через css, как показано ниже.

 /* CSS для элементов div и тегов img */
картинка {
максимальная ширина: 100%;
максимальная высота: 100%;
}
.auto-resize-портрет {
высота: 80 пикселей;
ширина: 50 пикселей;
}
.auto-resize-landscape {
высота: 30 пикселей;
ширина: 80 пикселей;
}
.auto-resize-square {
высота: 75 пикселей;
ширина: 75 пикселей;
}
.auto-resize-big{
ширина: 150 пикселей;
высота: 150 пикселей;
}

В первом div ширина и высота нашего изображения автоматически изменяется, чтобы соответствовать 50 Элемент div размером 80 пикселей (фактический размер изображения 100 100), т. е. размер изображения автоматически изменился до 50 * 50 пикселей

. А во втором элементе div размер изображения автоматически изменился до 30 * 30 пикселей.

В третьем div, т. е. div с классом .auto-resize-square, автоматически изменяется размер изображения до 75*75.

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

В приведенных выше примерах изображение помещается в родительский элемент div без его масштабирования. Скажем, например, размеры нашего изображения 100*100, что означает соотношение ширины и высоты 1:1.

В первом div ширина составляет 50 пикселей, а высота — 80 пикселей, т. е. максимальная ширина изображения может составлять только 50 пикселей, так как соотношение ширины и высоты изображения 1:1, поэтому высота регулируется до 50 пикселей.

А во втором div высота 30px, а ширина 80px. Максимальная высота изображения может быть только 30 пикселей, а ширина настроена на 30 пикселей.

В последнем div, т. е. div с классом .auto-resize-big, максимальная доступная высота и ширина изображения составляют 200 пикселей. Но фактические размеры изображения составляют всего 100*100 пикселей. Так отображается как есть.

Автоматическое изменение размера изображения с помощью CSS3 (современные веб-браузеры): #

Чтобы автоматически изменить размер изображения с помощью CSS3 в современных веб-браузерах, используйте одну строку кода CSS3 ниже, изображение будет автоматически изменено, чтобы соответствовать родительскому элементу div.

 /* Пример CSS3 */
картинка {
высота: 100%;
ширина: 100%;
подходит для объекта: содержит;
}

Мы должны указать ширину и высоту тега изображения как 100%. И добавьте значение свойства объекта-подгонки как содержимое.

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

В этом случае размеры нашего изображения составляют 100 100, а размер элемента div составляет 200 200. Размер изображения автоматически изменяется до размеров 200*200. Четкость изображения будет снижена. См. ниже демонстрацию

Автоматическое изменение размера изображения с помощью css Демонстрационный пример: #

Пройдите демонстрацию и поймите разницу между способами css и css3.

Автоматическое изменение размера изображения с помощью демонстрационной версии CSS

Автоматическое изменение размера изображения с помощью CSS

👋 Будьте в курсе событий

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

Изменение размера контейнеров изображений Fluid с помощью небольшого трюка с отступами CSS

Полезный совет по разработке внешнего интерфейса. Энди Шора

← вернуться на andyshora.com | Твитнуть эту статью

Проблема

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

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

<дел>