Html масштабирование картинки: Масштабирование картинок

Posted:

Янв 15, 2023

Comments:

Html масштабирование картинки: Масштабирование картинок | WebReference

Содержание

Масштабирование картинок | WebReference

Если для элемента <img> не задать атрибуты width и height, то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.

Изменение масштаба и пропорций изображения делается как через атрибуты <img>, так и через стили.

Использование атрибутов

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

Пример 1. Размеры в пикселях

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
</head>
<body>
<img src=»image/redcat. jpg» alt=»Размеры не заданы»>
<img src=»image/redcat.jpg» alt=»Задана ширина»>
<img src=»image/redcat.jpg» alt=»Задана ширина и высота»>
</body>
</html>

В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Рис. 1. Размеры фотографии

Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.

Пример 2. Размеры в процентах

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
figure {
width: 27%; /* Ширина */
float: left; /* Выстраиваем элементы по горизонтали */
margin: 0 0 0 3. 5%; /* Отступ слева */
background: #f0f0f0; /* Цвет фона */
border-radius: 5px; /* Радиус скругления */
padding: 2%; /* Поля */
}
figure:first-child {
margin-left: 0; /* Убираем отступ для первого элемента */
}
</style>
</head>
<body>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка»>
</figure>
</body>
</html>

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Масштабирование через стили

Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height. Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента <figure>.

Пример 3. Размеры через стили

figure img {
 width: 100%; /* Ширина в процентах */
}

Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width, то стили имеют приоритет выше.

Интерполяция

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

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

Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering. К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.

Пример 4. Изменение алгоритма интерполяции

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
img { border: 1px solid #ccc; }
. edge {
image-rendering: -moz-crisp-edges; /* Firefox */
-ms-interpolation-mode: nearest-neighbor; /* IE */
image-rendering: crisp-edges; /* Стандартное свойство */
}
</style>
</head>
<body>
<img src=»image/russia.png» alt=»Флаг России»>
<img src=»image/russia.png» alt=»Флаг России»>
</body>
</html>

Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.

Рис. 3. Вид картинок после увеличения масштаба

Вписывание картинки в область

Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).

Пример 5. Использование overflow

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
figure {
width: 100%; /* Ширина области */
height: 400px; /* Высота области */
margin: 0; /* Обнуляем отступы */
overflow: hidden; /* Прячем всё за пределами */
min-width: 600px; /* Минимальная ширина */
}
figure img {
width: 100%; /* Ширина изображений */
margin: -10% 0 0 0; /* Сдвигаем вверх */
}
</style>
</head>
<body>
<figure>
<img src=»image/redcat. jpg» alt=»Рыжая кошка»>
</figure>
</body>
</html>

Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри <figure> устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.

Рис. 4. Фотография внутри области заданных размеров

Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover, оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.

Пример 6. Использование object-fit

figure {
 width: 100%; /* Ширина области */
 height: 400px; /* Высота области */
 margin: 0; /* Обнуляем отступы */
}
figure img { 
 width: 100%; /* Ширина изображений */
 height: 100%; /* Высота изображении */
 object-fit: cover; /* Вписываем фотографию в область */
}

См.

также

<img>
<picture>
object-fit
Атрибуты элементов
Выравнивание картинок
Добавление медиа-контента
Изображения
Изображения
Изображения в HTML
Подрисуночная подпись
Фон в CSS
Форматы графических файлов

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Форматы графических файлов
Ctrl+←

Элемент <figure>
Ctrl+→

Масштабирование изображений на CSS / Хабр

Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной 14 апреля 2020 года автора Stephanie Eckles

Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В не очень далёком прошлом, когда JQuery ещё был «Царём горы», наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch

Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:

background-size: cover;

Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.

Альтернативный метод использует стандартный тег img и магию свойства

object-fit: cover;

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

Использование

background-size: cover

В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.

Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style. Рекомендуется использовать aria-label, который заменит атрибут alt, присутствующий в тегах img.

<article>
  <div aria-label="Preview of Whizzbang Widget"></div>
  <div>
    <h4>Whizzbang Widget SuperDeluxe</h4>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
      biscuit marzipan. Macaroon pie sesame snaps jelly-o.
    </p>
    <a href="#">Add to Cart</a>
  </div>
</article>

Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom, позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:

. card__img {
  background-size: cover;
  background-position: center;
  /* Соотношение сторон 16:9 */
  padding-bottom: 62.5%;
}

Всё вместе это будет выглядеть следующим образом:

Использование

object-fit: cover

Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16

Это свойство применяется непосредственно к тегу img, поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt:

<article>
  <img alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech"/>
  <div>
    <h4>Whizzbang Widget SuperDeluxe</h4>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
      biscuit marzipan. Macaroon pie sesame snaps jelly-o.
    </p>
    <a href="#">Add to Cart</a>
  </div>
</article>

Затем CSS-код дополняется свойством height, которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit, которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height:

.card__img {
  object-fit: cover;
  height: 30vh;
}

В результате получаем следующее:

Когда использовать каждое из решений

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

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

Когда следует выбирать background-size:

при использовании с контейнером, в котором предполагается размещать какое-то содержимое. Например, с шапкой сайта

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

если изображение носит декоративный характер и не потребности в семантике тега img

Когда следует выбирать object-fit:

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

Масштабирование изображений HTML –

спросил
13 лет, 3 месяца назад

Изменено
1 год, 6 месяцев назад

Просмотрено
495 тысяч раз

Я пытаюсь отобразить несколько больших изображений с HTML-тегами img. В данный момент они уходят за край экрана; как я могу масштабировать их, чтобы они оставались в окне браузера?

Или, в вероятном случае, если это невозможно, можно ли хотя бы сказать «отобразить это изображение на 50% от его нормальной ширины и высоты»?

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

html
масштабирование изображения

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

Первая часть может быть выполнена, но требует JavaScript, поэтому может работать не для всех пользователей.

CSS достаточно:

 img {
    ширина: желаемая_ширина;
    высота: авто; /*для сохранения соотношения сторон изображения*/
}

Я знаю, что этот вопрос задавали уже давно, но на сегодняшний день один простой ответ:

Использование здесь vw говорит о том, что ширина относится к 55% ширины области просмотра.

Все основные современные браузеры поддерживают это.

Перейдите по этой ссылке.

Javascript не требуется.

IE6 Internet Explorer 6

Процент работает только для ширины элемента, но высота:100%; не работает без правильного кода.

CSS

 html, body { height:100%; }

Затем использование процентов работает правильно и динамически обновляется при изменении размера окна.

  jpg">

Атрибут ширины не требуется, ширина изменяется пропорционально изменению размера окна браузера.

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

 img { -ms-режим интерполяции: бикубический; }

Реквизиты идут к этому источнику:
Ultimate IE6 Cheatsheet: как исправить более 25 ошибок Internet Explorer 6

Добавление max-width: 100%; на тег img у меня работает.

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

Для автоматического почтового ящика/столба в прямоугольнике фиксированного размера используйте CSS-свойство object-fit . Обычно это то, что я хочу, и это позволяет избежать использования кода, чтобы выяснить, какое измерение является доминирующим, или — что я делал раньше — встраивания элемента с дочерним элементом , чтобы обернуть содержимое его хороший сохранить параметры AspectRatio .

 

  <голова>
    <стиль>
      :корень
      {
        --box-side: мин.(42vmin, 480px);
      }
      тело
      {
        выровнять-элементы: по центру;
        дисплей: гибкий;
        flex-wrap : обернуть ;
        выравнивание содержимого: центр;
      }
      тело, html
      {
        высота: 100%;
        ширина: 100%;
      }
      изображение
      {
        фон: серый;
        граница: 1px сплошной черный;
        высота: var( --box-side );
        объектно-соответствующий : содержит ;
        ширина: var( --box-side );
      }
    
    соответствует объекту
  
  <тело>
    
    
    
     amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg">

Лучший способ, который я знаю, как это сделать, это:

1) установить переполнение для прокрутки, и таким образом изображение останется, но вместо этого вы можете прокрутить, чтобы увидеть его

2) загрузите изображение меньшего размера. Теперь существует множество программ при загрузке (вам понадобится что-то вроде PHP или .net, чтобы сделать это, кстати), вы можете настроить автоматическое масштабирование.

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

Удачи!

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

javascript — Масштабировать ширину и высоту HTML-изображения в %

спросил
2 года, 6 месяцев назад

Изменено
1 год, 10 месяцев назад

Просмотрено
6к раз

Я знаю, что свойства ширины и высоты HTML-изображений можно установить просто с помощью jpg"> .

Я ищу, существует ли одно свойство CSS, которое принимает только одно значение в % и масштабирует ширину и высоту исходного изображения в соответствии с этим процентом. Например, если высота и ширина Debian.jpg равны 1000x700 , и я указываю 50% в этом свойстве CSS, то изображение масштабируется до 500x350 , и, следовательно, соотношение сторон сохраняется.

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

JavaScript
HTML
css
изображение

Да, есть способ сохранить соотношение сторон изображения и изменить размер изображения до части исходного размера. Однако CSS не может знать внутренний размер (исходный размер ) изображения. Следовательно, вы можете сделать только две вещи:

Явно сообщить CSS исходный размер
Используйте JS для получения исходного размера при загрузке изображения

Что не работает

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

При этом лично я обычно хочу указать ширину изображения явно. Например, на больших устройствах я хочу, чтобы изображение было 1080 пикселей. На небольших устройствах я хочу, чтобы изображение было 560 пикселей. Я могу просто создать контейнер для изображения определенного размера, поместить изображение внутрь контейнера и указать ширину изображения до 100% (от размера его контейнера).

Что работает

Как уже упоминалось, есть два способа сделать изображение 50% от его исходной ширины. Во-первых, с помощью JS. Во-вторых, явно сообщите CSS исходную ширину изображения.

Используя подход JS, вам просто нужно изменить ширину изображения. При загрузке получите внутреннюю ширину изображения, затем установите новую ширину на внутреннюю ширину, деленную на 2. Просто.
Использование явного CSS-подхода менее выгодно. Это решение предполагает, что изображение всегда будет одним и тем же, и вам, разработчику, необходимо заранее знать исходный размер изображения. При изменении исходного размера изображения вам также потребуется обновить код. При этом вы можете добиться этого, указав пользовательское свойство CSS внутри класса CSS, указав атрибут (в HTML), который дает внутреннюю ширину, а затем используя attr() (все еще экспериментальный и в основном не поддерживается) или используя атрибут внутреннего размера и установите ширину и стиль через CSS (все еще экспериментальный и не поддерживается). Последние два решения, как уже упоминалось, не поддерживаются большинством браузеров и могут пока работать некорректно.

На мой взгляд, лучше всего установить ширину изображения на 50% от его внутренней ширины с помощью JS. Вот решение, демонстрирующее решения, которые не работают, и решение JS. Соотношение сторон сохраняется автоматически, если вы изменяете только один из размеров изображения (ширину/высоту).

 const imageJS = document.querySelector('.image--changed-with-js')

imageJS.onload = () => {
  константная внутренняя ширина = imageJS.width
  imageJS.ширина = imageJS.ширина / 2
}

 * {
  box-sizing: граница-коробка;
}

тело,
HTML {
  поле: 0px;
}

картинка {
  поле: 20px 0;
}

/* Изображение имеет собственный размер (т.е. исходный размер изображения) */
.изображение--оригинал {
  ширина: авто;
}

/* Изображение, содержащееся в контейнере размером 500 пикселей
 Изображение имеет ширину 50% от 500 пикселей = 250 пикселей */
.контейнер {
  ширина: 500 пикселей;
}

.image--changed-with-container {
  ширина: 50%;
}

/* Изображение не содержится в div
Однако изображение находится внутри тела
 — его контейнер
Теперь он имеет ширину 50% от тела. 
НЕ 50% его внутренней ширины */
.image--изменено-без-контейнера {
  ширина: 50%;
}

/* Изображение изменено с помощью JS
Вы можете получить внутренний размер через JS и изменить его размер там */
.image--changed-with-js {}

 

<дел>

Если вы установите ширину на фиксированное количество пикселей, например, img { width: 500px; } , высота будет соответствующим образом скорректирована для сохранения того же соотношения сторон. Если вы установите высоту, ширина будет соответствующим образом скорректирована, чтобы сохранить то же соотношение сторон. контейнер элемента. Высота будет изменена соответствующим образом, чтобы сохранить то же соотношение сторон.

Однако, если вы установите высоту в процентах, т.е. img { height: 50% } , это просто не сработает по разным причинам.

Решение очень простое. Чтобы сохранить соотношение сторон, все, что вам нужно сделать, это установить свойства CSS высоты и ширины, например:

 #theImage {
  ширина: 100%;
  высота: авто;
}

Установив свойство ширины на 100%, вы изображение занимает все доступное горизонтальное пространство. Если для свойства height установлено значение auto, высота вашего изображения изменяется пропорционально ширине, чтобы обеспечить сохранение соотношения сторон. Конечным результатом является изображение, которое идеально масштабируется вверх или вниз.

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

Я предлагаю удалить указанные вами размеры. Да, есть код, который можно указать в css.
в html сделайте так:

в css сделайте что-то вроде этого:

 .myCustomImages {
  максимальная ширина: 50%;
  максимальная высота: 50%;
}

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

Когда изображение находится внутри контейнера с display: inline-block , вы можете определить ширину изображения в css, и оно будет относительно самого себя (если у родителя есть display: block это будет относительно его родителя, если это display:inline будет относительно ближайшего родительского блока).

Когда вы определяете одно из измерений ( ширина или высота ), а не другое, по умолчанию сохраняется соотношение сторон.

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

 дел {
  отображение: встроенный блок;
}
#половина {
    ширина: 50%;
}
#оригинал {
    ширина: 100%;
}
#большой {
    ширина: 150%;
}

Изображение 400X267
50% размера
<дел>

100% размер

<дел>

Posted:

Comments: