Как уменьшить картинку в css в процентах
Перейти к содержимому

Как уменьшить картинку в css в процентах

  • автор:

Как уменьшить изображение на 50%?

Author24 — интернет-сервис помощи студентам

Привет.
Мне необходимо вдвое уменьшить изображение.
По дефолту в процентах задаётся размер изображения по отношению к странице.
Так что без глупостей пожалуйста.

Подобная тема есть здесь: www.cyberforum.ru/html/thread120085.html
Полазил в теме, нашёл такой код:

1 2 3 4 5 6 7 8 9 10
script type="text/javascript" language="javascript"> function small() { var w=document.images[0].width; var h=document.images[0].height; document.images[0].width=w*0.5; document.images[0].height=h*0.5; } script> div id="center">img src="img.jpg" alt="Моя улюблена картинка" id="myImg" onLoad="small()">div>

Попробовал. Да! То что нужно! Но проблема в том что если я использую две картинки, вторая остаётся оригинального размера, а первая становится меньше чем нужно даже.
Я не знаю что делать. Ваши идеи парни?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как уменьшить изображение?
Ребят, всем привет! Вот у меня проблема, при загрузке больше 4м фото, выскакивает вот такая ошибка.

Как уменьшить изображение?
Есть изображение в градациях серого, 256 оттенков, которое хранится в массиве типа byte. Как.

Как уменьшить и обрезать изображение?
Есть картинка 663х882. Мне нужно её уменьшить до 180х197. Проблема состоит в том, что при.

Уменьшить изображение
Загружаю изображение и через imagecopyresampled() изменяю размер его.

50 / 50 / 15
Регистрация: 25.04.2014
Сообщений: 106

После загрузки изображения запускается функция small() и не передается никаких параметров.
я конечно не знаток js, но поему вот эта строка

var w=document.images[0].width;

Указывает на изображение через массив изображений. И 0 в квадратных скобках указывает на первое изображение, тоесть тебе необходимо либо перебирать весь массив изображений, либо в функцию передавать номер изображения начиная с нуля.
Попробуй вот так:

1 2 3 4 5 6 7 8 9 10
script type="text/javascript" language="javascript"> function small(x) { var w=document.images[x].width; var h=document.images[x].height; document.images[x].width=w*0.5; document.images[x].height=h*0.5; } script> div id="center">img src="img.jpg" alt="Моя улюблена картинка" id="myImg" onLoad="small(0)">div>

Единицы измерения: px, em, rem и другие

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

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

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

Достоинства

  • Главное достоинство пикселя – чёткость и понятность

Недостатки

  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Давно на свалке: mm , cm , pt , pc

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Почему в сантиметре cm содержится ровно 38 пикселей?

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

 
Страусы
Живут также в Африке

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с em вместо px :

 
Страусы
Живут также в Африке

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое размер шрифта?

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

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

Единицы ex и ch

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

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

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

 
Страусы
Живут также в Африке

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Протестируем на таком списке:

Масштаб с учетом содержимого

3D-функции Photoshop будут удалены в будущих обновлениях. Пользователям, работающим с 3D-функциями, рекомендуется ознакомиться с новой коллекцией Adobe Substance 3D, которая представляет собой новое поколение 3D-инструментов от Adobe. Дополнительная информация о прекращении поддержки 3D-функций в Photoshop представлена здесь: Photoshop 3D | Распространенные вопросы о прекращении поддержки 3D-функций в Photoshop.

Изменяет размер изображения, сохраняя содержимое.

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

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

Масштабирование с учетом содержимого применимо к слоям и выделенным областям. Изображения могут быть в режимах RGB, CMYK, Lab или режиме градаций серого и иметь любую глубину в битах. Масштабирование с учетом содержимого нельзя применять к корректирующим слоям, слоям-маскам, отдельным каналам, смарт-объектам, 3D-слоям, видеослоям, нескольким слоям сразу или группам слоев.

Photoshop изменяет размер изображения и защищает содержимое

A. Исходное изображение B. Более узкое изображение C. Более узкое изображение, использовано масштабирование с учетом содержимого

CSS-свойство aspect-ratio

Соотношение сторон ( aspect-ratio ) обычно выражается двумя целыми числами с двоеточием: width:height или x:y. Наиболее распространенные соотношения сторон для фотографий – 4:3 и 3:2, а видео, как правило, имеют соотношение сторон 16:9 или 4:3.

aspect-ratio

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

  • iframe, ширина которого 100% от родительской ширины, а высота должна быть пропорциональна ширине.
  • подготовка контейнеров для изображений, видео и встраиваемых материалов для предотвращения дёргания и перестройки макета, по мере их загрузки
  • единообразное адаптивное пространство для интерактивной визуализации данных (графиков и т.п.) или SVG-анимации
  • единообразное адаптивное пространство для многоэлементных компонентов, например – карточки или календарики с датами.
  • единообразное адаптивное пространство для нескольких изображений разного размера (можно использовать вместе с object-fit )

Встраивание изображений

Определение соотношения сторон помогает устанавливать размеры медиа в адаптивном контексте. Один из инструментов в этом сегменте – css-свойство object-fit , которое позволяет указывать, как объект (например, изображение) внутри блока должен заполнить этот блок:

Значения initial и fill искажают изображение, чтобы заполнить пространство. Это приводит к тому, что изображение может оказаться становится сжатым и размытым. Не идеально.

object-fit: cover использует размер меньшей из сторон изображения, чтобы заполнить пространство, затем обрезает картинку, чтобы поместить ее в контейнер.

object-fit: contain гарантирует, что всё изображение всегда будет видимым. Это – противоположность cover , для вычисления здесь используется большая из сторон, а размеры изображения изменяются так, чтобы сохранить его внутреннее соотношение сторон и вписать его в отведенное пространство.

В случае object-fit: none изображение обрезается по центру (положение объекта по умолчанию) с естественным размером.

object-fit: cover часто используется для обеспечения хорошего единообразного интерфейса при работе с изображениями разных размеров, однако при этом может теряться часть информации (изображение обрезается по самым длинным краям).

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

Старый прием: сохранение соотношения сторон с padding-top

padding-top

Чтобы сделать их отзывчивыми, можно использовать соотношение сторон. Это позволяет установить определенный размер соотношения и использовать остальную часть носителя на отдельной оси (высоте или ширине).

До настоящего времени широко распространенно кроссбраузерное решение для поддержания соотношения сторон в зависимости от ширины изображения, известное, как «Padding-Top Hack». Для этого решения требуется родительский контейнер и абсолютно спозиционированный дочерний контейнер. Далее требуется рассчитать соотношение сторон в процентах, чтобы установить его как верхнюю часть поля ( padding-top ). Например:

  • отношение сторон 1:1 = 1 / 1 = 1 = padding-top: 100%
  • отношение сторон 4:3 = 3 / 4 = 0.75 = padding-top: 75%
  • отношение сторон 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
  • отношение сторон 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

Теперь, когда разобрались со значениями соотношения сторон, их можно применить родительскому контейнеру. Рассмотрим следующий пример:

 
.

R этому html-коду подойдёт следующий CSS:

.container < position: relative; width: 100%; padding-top: 56.25%; /* отношение 16:9 */ >.media

Обеспечение соотношения сторон с помощью aspect-ratio

aspect-ratio

Вычисление значения padding-top не очень интуитивно понятно и требует применение позиционирования. С помощью нового css-свойства aspect-ratio отношение сторон такая же задача решается иначе.

Для html-разметки из примера выше следует заменить padding-top: 56.25% на aspect-ratio: 16 / 9 , т.е. указать реальное отношение width / height .

.container < position: relative; width: 100%; padding-top: 56.25%; /* отношение 16:9 */ aspect-ratio: 16 / 9; /* отношение 16:9 */ > .media 

Использование aspect-ratio вместо padding-top намного понятнее и оставляет для свойства padding его обычное поведение.

Для свойства aspect-ratio можно установить для соотношения сторон значение auto , где «замененные элементы с внутренним соотношением сторон используют это соотношение сторон; в противном случае блок не имеет предпочтительного соотношения сторон». Если указать одновременно значения auto и , то предпочтение будет соотношению сторон, определяемому делением width на height , если только это не замещаемый элемент с внутренним соотношением сторон (в этом случае используется его собственное соотношение сторон).

Пример согласованности в сетке (grid)

Этот пример чётко работает с механизмами компоновки, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых требуется сохранить соотношение сторон 1:1, например сетку логотипов спонсоров:

.sponsor-grid < display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); >.sponsor img < aspect-ratio: 1 / 1; width: 100%; object-fit: contain; >

Изображения в сетке внутри родительского элемента с разным соотношением сторон.

Пример предотвращения сдвига макета

Еще одна замечательная особенность css-свойства aspect-ratio – оно предоставляет возможность реализовать блоки-заглушки (placeholder) для предотвращения сдвига макета (CLS – Cumulative Layout Shift) и предоставления качественных веб-показателей. В первом примере демонстрируется загрузка ресурса из API и получается сдвиг макета, когда загрузка мультимедиа завершится. Проще говоря, текст и блоки страницы скачут и перемещаются, до тех пор, пока все ресурсы загружаются.

Видео о совокупном сдвиге макета, который происходит, когда для контейнера загружаемого ресурса не установлено соотношение сторон. Это видео записано с помощью эмуляции медленного соединения – сети 3G.

Применение css-свойства aspect-ratio устанавливает контейнеру ожидаемое соотношение сторон и предотвращает сдвиг макета после загрузки мультимедиа:

Видео c предустановленным для контейнера загружаемого ресурса aspect-ratio . Это видео записано с помощью эмуляции медленного соединения – сети 3G.

Пример использования атрибутов изображения для указания соотношения сторон

Альтернативный способ установить соотношение сторон изображению – использовать его атрибуты. Если заранее известны размеры изображения, можно установить их, c помощью атрибутов width и height .

.

Например, если известно, что размеры изображения составляют 800px на 600px, код разметки для него будет выглядеть так: . Тогда, если у отправленного изображения будет такое же соотношение сторон, даже не обязательно с точно такими же значениями в пикселях, можно использовать значения атрибутов изображения для установки соотношения в сочетании с css-свойствами width: 100% и height: auto , чтобы изображение занимало отведенное пространство. Все вместе это будет выглядеть так:

/* CSS */ img

В этом случае, эффект будет таким же, как при установке соотношения сторон изображения с помощью CSS aspect-ratio , и получится избежать кумулятивного сдвига макета.

Завершение

С новым CSS-свойством aspect-ratio , которое уже работает в нескольких современных браузерах, поддержка правильных соотношений сторон в контейнерах мультимедиа и макета становится проще и понятнее.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *