Разное

Css масштабирование изображения: html — Масштабирование картинки с сохранением пропорций

28.06.1987

Содержание

Как уменьшить масштаб картинки в css

Как сделать — масштабирование изображения

Контейнер должен иметь «относительное» позиционирование.

Пример

.img-zoom-container <
position: relative;
>

.img-zoom-lens <
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
>

.img-zoom-result <
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
>

Как уменьшить масштаб картинки в css

Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.

В данной теме, рассмотрим варианты подстройки элементов дизайна шапки, а именно — картинок, под резиновые макеты сайтов.

Делается это, обычно, тремя основными способами:
* Вёрсткой шапки, с использованием не фиксированных областей с фоном.
* Изменение параметров позиционированного изображения — разными способами.
* Изменение всего вида элементов методом динамического добавления/изменения стилей.

Вёрсткой шапки, с использованием не фиксированных областей с фоном.

Наиболее распространённой и кроссбраузерной, является конструкция вида:

.
В подобном исполнении, всё просто — рисуется шапка, в каком-нибудь графическом редакторе, например в фотошопе или кореле, нарезается на отдельные графические элементы (фрагменты):

картинка — слева:

картинка — справа:

и фон — по центру.

.
Для таблицы, в данном случае, прописывается фон, а ширина указывается в процентах — обычно 100%.
Ширина ячеек таблицы, в которых будут размещаться графические элементы, обычно прописывается в пикселах, но, как минимум, одна из ячеек таблицы должна иметь свободную ширину (auto).
То есть если ячеек две, как в данном случае, одной прописывается фиксированный размер, равный ширине картинки, второй устанавливается значение «auto» — то есть на всю оставшуюся ширину.

Сами картинки могут вставятся в предназначенные для них ячейки, как просто картинкой (тегом <img />), так и фоном.
В данном случае, картинки вставлены фоном, так как левая ячейка уже содержит текстовый блок — копирайт, а правая предполагает его наличие.

Здесь все просто — смотрим пример:

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

Изменение параметров позиционированного изображения

Масштабированием относительно родительского элемента.

В данном случае — таблица.

Сразу хочу отметить, что у браузера Internet Explorer небольшие проблемы с изменением размеров объекта — в данном случае — картинки.
Суть его в следующем:
Если у картинке реальная ширина равна, допустим 1024px, и необходимо чтобы при изменении ширины окна браузера это изображение растягивались/сужались пропорционально, то при сужении окна браузера ширина изображения в определенный момент “застревает” и не сужаются дальше. В результате чего оно выходит за пределы предполагаемого контента.
То бишь, изображения не сужаются меньше их фактического размера.

Обходится этот «баг» достаточно просто и заключается всего в одной строчке CSS-кода — в свойстве «table-layout: fixed», которое нужно применить к таблице, в которую заключено изображение.

Следовательно, если у вас картинка шапки заведомо больше, минимальной ширины сайта, нужно задать таблице этот параметр.
Задаётся он через стили (CSS) и имеет всего два аргумента: «auto» и «fixed».

Кроме того:
Если у изображения не указана высота, или указано значение «auto» — изображение масштабируется пропорционально (сохраняя соотношение сторон).
Если же высота указана конкретно (в любых положительных единицах измерения), то соотношение сторон нарушается и изображение масштабируется только в ширину, сохраняя заданную в высоту.

CSS-стили (изображение масштабируется пропорционально)

Автомасштабирование картинок по ширине родителя

Есть желание уменьшать размеры фото браузером в зависимости от разрешения пользователя.
Допустим выводим на странице фото шириной 1024px, и дабы не заставлять пользователя с меньшим разрешением пользоваться горизонатальным скроллингом, применяем следующий прием:
ставим нужным img стиль max-width:100%; height:auto.

Но с этой задачей не справляется IE8, если в теге img заданы width и height.

IE8 вместо пропорционального уменьшения картинки сжимает ее только по горизонтали. Если ширину и высоту img не задавать то масштабирование становится корректным.

Есть ли способ задать стили, чтобы заставить IE8 корректно масштабировать картинку при заданых width и height для стиля max-width:100%?

rendering — Свойство image-rendering CSS задает алгоритм масштабирования изображения.

Свойство CSS для image-rendering устанавливает алгоритм масштабирования изображения. Свойство применяется к самому элементу, к любым изображениям, установленным в других его свойствах, и к его потомкам.

Try it

Пользовательский агент будет масштабировать изображение, когда автор страницы указывает размеры, отличные от его естественного размера. Масштабирование также может происходить из-за взаимодействия с пользователем (масштабирование). Например, если естественный размер изображения составляет 100×100px , но его фактические размеры составляют 200×200px (или 50×50px ), то изображение будет увеличено (или уменьшено) с использованием алгоритма, заданного параметром image-rendering . Это свойство не влияет на немасштабированные изображения.

Syntax

/ * Значения ключевых слов * /
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/ * Глобальные значения * /
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Values

auto

Алгоритм масштабирования зависит от UA. Начиная с версии 1.9 (Firefox 3.0), Gecko использует билинейную передискретизацию (высокое качество).

smooth Experimental

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

high-quality Experimental

Идентично

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

crisp-edges

Изображение масштабируется с помощью алгоритма ближайших соседей.

pixelated

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

crisp-edges .

Примечание . Значения optimizeQuality и optimizeSpeed , присутствующие в раннем черновике (и полученные из его эквивалента image-rendering SVG ), определены как синонимы для значений smooth и pixelated соответственно.

Formal definition

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

auto | crisp-edges | pixelated

Examples

Настройка алгоритмов масштабирования изображений

На практике правила pixelated и crisp-edges можно комбинировать, чтобы обеспечить некоторую альтернативу друг другу. (Просто добавьте фактические правила к imageSmoothingEnabled . ) Canvas API может предоставить запасное решение для pixelated посредством ручного управления данными изображения или с помощью imageSmoothingEnabled .

CSS
.auto {
  image-rendering: auto;
}
.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
Result

Specifications

Specification
Модуль изображений CSS, уровень 3
# the-image-rendering

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
image-rendering

13

79

3.6

No

15

6

3

18

4

14

6

1. 0

crisp-edges

13

79

65

3.6

No

15

7

6

≤37

18

65

4

14

7

6

1.0

optimizeQuality

28

79

3.6

No

15

7

≤37

28

4

14

7

1.5

optimizeSpeed

28

79

3.6

No

15

7

≤37

28

4

14

7

1.5

pixelated

41

79

93

No

26

10

41

41

93

26

10

4. 0

Примечание. Хотя предполагается, что

crisp-edges использует масштабирование пиксельной графики, как в примере спецификации, на практике ни один браузер (по состоянию на январь 2020 г.) этого не делает. В Firefox crisp-edges интерпретируются как ближайший сосед, пикселизация pixelated поддерживается, а auto интерполируется как трилинейная или линейная.

Информацию о поведении в Chromium и Safari (WebKit) см. В функциях GetInterpolationQuality и CSSPrimitiveValue::operator ImageRendering() соответственно.

See also

  • Другие изображения , связанные свойства CSS: object-fit , object-position
    , image-orientation , image-rendering , image-resolution .
© 2005–2021 Авторы MDN.
Лицензия Creative Commons Attribution-ShareAlike License v2.5 или более поздняя.
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Изменение размера картинки в каталоге

mantis
Новичок