Как уменьшить размер изображения css

CSS: как я могу установить размер изображения относительно родительской высоты?

Я пытаюсь выяснить, как изменить размер изображения так, чтобы оно сохраняло отношение ширины к высоте, но изменялось до тех пор, пока высота изображения не совпадет с высотой содержащего div. У меня есть эти изображения, которые довольно большие и длинные (скриншоты), и я хочу поместить их в div шириной 200px, высотой 180px для отображения и без изменения размера изображений вручную. Чтобы это выглядело хорошо, стороны изображения должны быть переполнены и скрыты содержащим div. Это то, что у меня есть до сих пор:

HTML

CSS

Как вы можете видеть, на изображениях родительского контейнера отображается серый цвет, который вообще не должен отображаться. Для того, чтобы этот контейнер был полностью заполнен, ширина должна быть переполнена одинаково с обеих сторон. Возможно ли это? Можно ли также объяснить образ, который также слишком высок?

4 ответа

Я пытаюсь сделать таблицу с CSS display:table display:table-row и display:table-cell . Проблема в том, что я не могу установить высоту строк таблицы. Они расширяются до родительской высоты. В моем коде я установил .trow height на 30px , но они расширены до родительской высоты 400px . !important и.

Правка 1: я думал, что проясню свой пост. В принципе, я хочу, чтобы моя фотография меняла размер относительно высоты окна браузера, но всегда оставляла margin-bottom приблизительно 40px между ней и нижней частью страницы. Однако это не работает. Вместо этого браузер удостоверяется, что он может.

Оригинальный ответ:

Если вы готовы выбрать CSS3, вы можете использовать свойство css3 translate. Изменение размера в зависимости от того, что больше. Если ваша высота больше, а ширина меньше контейнера, ширина будет растянута до 100%, а высота будет обрезана с обеих сторон. То же самое касается и большей ширины.

Ваша потребность, HTML:

И CSS:

Объяснение

DIV устанавливается в положение relative . Это означает, что все дочерние элементы получат начальные координаты (исходные точки), с которых начинается этот DIV.

Изображение задано как элемент BLOCK, min-width/height оба значения 100% означают изменение размера изображения независимо от его размера, чтобы быть минимальным размером 100% его родителя. min -это ключ. Если по минимальной высоте высота изображения превышает высоту родителя, никаких проблем. Он будет искать, если минимальная ширина и попытается установить минимальную высоту 100% родителей. И то и другое происходит наоборот. Это гарантирует, что вокруг div нет пробелов, но изображение всегда немного больше и обрезается на overflow:hidden;

Теперь image , это установлено в позицию absolute с left:50% и top:50% . Это означает, что нажмите изображение 50% сверху и слева, убедившись, что начало координат взято из DIV. Левые/верхние единицы измерения измеряются от родителя.

Волшебный момент:

transform: translate(-50%, -50%);

Теперь эта функция translate свойства CSS3 transform перемещает/перемещает рассматриваемый элемент. Это свойство имеет дело с применяемым элементом, следовательно, значения (x, y) OR (-50%, -50%) означают перемещение отрицательного изображения влево на 50% размера изображения и перемещение к отрицательному верху на 50% размера изображения.

Например, если размер изображения был 200px × 150px, transform:translate(-50%, -50%) будет рассчитан для перевода(-100px, -75px). % единица измерения помогает, когда у нас есть различные размеры изображения.

Это просто хитрый способ определить центроид изображения и родительский DIV и сопоставить их.

Приношу извинения за то, что слишком долго объяснял!

Ресурсы, чтобы прочитать больше:

Как описано в справочнике синтаксиса Kramdown , мы можем установить размер высоты и ширины изображения, как показано ниже: Here is an inline ![smiley](smiley.png)<:height=36px width=36px>. Но как я могу установить местоположение изображения, например set align=center ?

Чего я хочу : У меня есть изображение рубашки PNG, которое имеет четкий фон, и я хочу поместить его поверх цветного квадрата, так что рубашка на изображении будет pop по краям квадрата, в декоративных целях. Ширина изображения устанавливается на 100%,, а высота устанавливается автоматически, чтобы.

Как изменить размер изображения, сохраняя соотношение сторон в CSS?

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

В принципе, я хочу изменить размер изображения, сохраняя соотношение сторон. Как это сделать?

Размер изображения background css: Как изменить размер фоновой картинки через CSS3

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

Могут применяться единицы измерения.

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

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

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

Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Заполнение фоном

Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

Масштабирование нескольких фонов

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

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

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

Просмотр демонстрационной страницы с background-size.

background-size | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.5+ 3.0+ 3.6+ 2.1+ 1.0+
Краткая информация
Версии CSS
Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ <значение> | <проценты> | auto ] <1,2>| cover | contain

Значения

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

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.

Opera до версии 10.53 использует нестандартное свойство -o-background-size.

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.

масштабируем фон — учебник CSS

Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:

…то высота фоновой картинки будет вычисляться автоматически.

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

background-size: contain

background-size: cover

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

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

background-size: 300px 300px

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :

background-size: auto 50%
Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Свойство background-size | CSS справочник

Определение и применение

CSS свойство background-size определяет размер фонового изображения/-ий. Позиционирование фонового изображения внутри элемента определяется свойством background-origin.

Поддержка браузерами

Значения свойства

Значение Описание
auto Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
length Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
% Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
cover Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
contain Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

background-size | CSS | WebReference

Масштабирует фоновое изображение, согласно заданным размерам.

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

<bg-size> = [ <размер> | <проценты> | auto ] <1,2>| cover | contain

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз. <радиус>
# Повторять один или больше раз через запятую. <время>#

Значения

Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

Пример

Объектная модель

Объект.style.backgroundSize

Примечание

Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.

Opera до версии 10.53 использует свойство -o-background-size.

Firefox до версии 4 использует свойство -moz-background-size.

Opera 9.5 некорректно устанавливает положение фиксированного фона.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor&#8217;s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

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

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

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

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

Как научиться разрабатывать сайты

CSS background-size | TuHub

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово ( cover или contain ), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto . Например:

Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.

Если указано только одно не ключевое значение, то второе считается как auto .

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

Синтаксис свойства
  • Синтакис:
  • Значение по умолчанию: auto
  • Применяется: ко всем элементам
  • Наследуется: да
  • Анимируется: да, за исключением ключевых слов
Значения свойства
  • <length> &#8212; значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.
  • <percentage> &#8212; значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box , то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.
  • contain &#8212; масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
  • cover &#8212; масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
  • auto &#8212; ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.
  • Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
  • Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
  • Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово contain .
  • Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
  • Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.
Поддержка браузерами
CSS3 Background-image options

Пример

Ниже вы увидите пример использования свойства background-size :

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи CSS.

В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.

Есть несколько способов определения размеров &#8212; взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

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

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.
Использование процентов может быть полезно для адаптивного дизайна.

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

Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Заполнение фоном

Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

Масштабирование нескольких фонов

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

Все последние версии браузеров поддерживают свойство background-size.

Заключение

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

Не забудьте подписаться на обновления блога, чтобы не пропустить новые интересные статьи.

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

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