Как сохранить пропорции картинки css

Как сделать — пропорции элемента

Узнайте, как сохранить пропорции элемента с помощью CSS.

Пропорции

Создание гибких элементов, которые держат их пропорции (4:3, 16:9 и т.д.) при изменении размера:

Что такое соотношение сторон?

Соотношение сторон элемента описывает пропорциональную связь между его шириной и высотой. Два распространенных видео пропорции являются 4:3 (универсальный формат видео 20-го века), и 16:9 (универсальный для HD телевидения и Европейского цифрового телевидения).

Как-высота равна ширине

Шаг 1) добавить HTML:

Используйте элемент контейнера, например < div >, и если требуется текст внутри него, Добавьте дочерний элемент:

Пример

Шаг 2) добавить CSS:

Добавьте значение в процентах для padding-top сохранения соотношения сторон div. Следующий пример создаст соотношение сторон 1:1 (высота и ширина всегда равны):

Пример 1:1 пропорции

.container <
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
>

/* If you want text inside of the container */
.text <
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
>

сохранить — Изменение размера изображения CSS и сохранение пропорций

масштабирование картинки под размер окна (12)

Я работаю с изображениями, и я столкнулся с проблемой соотношения сторон.

Как вы можете видеть, height и width уже указаны. Я добавил правило CSS для изображений:

Но для big_image.jpg я получаю width=500 и height=600 . Как я могу установить изображения для изменения размера, сохраняя их пропорции.

Вы можете использовать это:

Вы можете создать div следующим образом:

И используйте этот CSS для его стилизации:

Нет стандартного способа сохранить соотношение сторон для изображений с width , height и max-width указанными вместе.

Поэтому мы вынуждены либо указывать width и height чтобы предотвратить «переходы» страницы во время загрузки изображений, либо использовать max-width и не указывать размеры изображений.

Указание только width (без height ) обычно не имеет большого смысла, но вы можете попытаться переопределить HTML-атрибут height , добавив правило, подобное IMG IMG в таблицу стилей.

См. Также связанную с Firefox ошибку 392261 .

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

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

Свойство background-size — это только> = 9, но если это нормально, вы можете использовать div с background-image и задать background-size: contain :

Теперь вы можете просто установить свой размер div на все, что хотите, и не только изображение сохранит пропорции, оно также будет централизовано как вертикально, так и горизонтально внутри div. Просто не забудьте установить размеры в css, так как divs не имеют атрибута width / height самого тега.

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

Изменить: в соответствии с документацией размера фона MDN вы можете моделировать свойство background-size в IE8 с использованием проприетарного объявления фильтра:

Хотя Internet Explorer 8 не поддерживает свойство background-size, можно эмулировать некоторые его функции с помощью функции нестандартного -ms-фильтра:

Удалите свойство height.

Задав оба параметра, вы изменяете соотношение сторон изображения. Просто установив один, вы измените размер, но сохраните пропорции.

Необязательно, чтобы ограничить превышение:

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

Чтобы поддерживать отзывчивое изображение, сохраняя при этом изображение с определенным соотношением сторон, вы можете сделать следующее:

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

Благодаря @ Kseso по адресу http://codepen.io/Kseso/pen/bfdhg . Проверьте этот URL для большего количества коэффициентов и рабочего примера.

Я изо всех сил пытался справиться с этой проблемой и в конце концов пришел к такому простому решению:

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

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

И это будет полезно при работе с разным размером экрана .

  1. Использование padding-top для установки высоты по ширине.
  2. Использование position: absolute чтобы помещать изображение в пространство заполнения.
  3. Используя max-height and max-width убедитесь, что изображение не будет находиться над родительским элементом.
  4. используя display:block and margin: auto чтобы центрировать изображение.

Я также комментирую большинство трюков внутри скрипки.

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

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

Css img сохранить пропорции

Это то, что вы ищете? Он используется background-size:contain для автоматической проверки соответствия всего изображения, а затем background-position:center для центрирования его в элементе div.

Автор: htmlcat Размещён: 30.08.2019 05:56

64398 Репутация автора

object-fit Это сделано для того, чтобы сохранить пропорции, а также обрезать изображение так, как вы хотите:

Свойство object-fit CSS устанавливает, как содержимое заменяемого элемента, такого как или , должно быть изменено в соответствии с его контейнером.

значения синтаксиса: fill | contain | cover | none | scale-down

Вы можете изменить выравнивание объекта содержимого заменяемого элемента в поле элемента, используя object-position свойство. пример:

Фронтенд разработчик в Маркет, Ключевые навыки: html, css, javascript. З/п от 200 000 р.

Компания Яндекс, Москва

Я работаю с изображениями, и я натыкался на проблемы с пропорциями.

Как вы можете видеть, и уже заданы. Я добавил правило CSS для изображений:

big_image.jpg width=500 height=600

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

Ответ 1

This image is originally 400&#215;400 pixels, but should get resized by the CSS:

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

Ответ 2

в зависимости от материнской ширина коробки.

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

Лучшие Практики (2018):

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

This image is originally 400&#215;400 pixels, but should get resized by the CSS:

С решением любитель, вы сможете обрезать изображение, независимо от ее размера и добавить цвет фона, чтобы компенсировать кадрированием.

This image is originally 640&#215;220, but should get resized by the CSS:

Для строки с указанием обивка, вам нужно рассчитать соотношение сторон изображения, например:

640px (w) = 100%220px (h) = ?640/220 = 2.909100/2.909 = 34.37%

Так, отступ сверху = 34.37%.

Ответ 3

Я боролся с этой проблемой довольно сложно, и дошли до этого простого решения:

object-fit: cover;width: 100%;height: 250px;

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

ушко вертикальное выравнивание в колонке

размер изображения в css, как заполнить, не стрейч?

показывать фотографии сохраняя пропорции.

как автоматически изменить размер изображения, чтобы соответствовать &#8216;див&#8217; контейнер?

как мне преобразовать картинку, чтобы увеличить изображение в css

как я могу дать текст или изображение прозрачный фон с помощью css?

как изменить размер изображения с сохранением пропорций в css?

как мне установить min и max размер для img и сохранить пропорции?

как изменить изображение прямоугольника в квадрат изображения без потери изображения?

как автоподбор изображения в контейнер с постоянной пропорции, используя только css?

как сохранить пропорции при масштабировании изображения с помощью одного (усс) размер в ie6?

как изменить размер изображения 1000х1000 в 200х300 изображения без искажения пропорций

высота изображения так же, как ширина

изображения в javascript изменить размер

сохранить пропорции динамически загружаемые изображения

сохранять пропорции див, но заполнить ширину экрана и высоту в css?

сохранить пропорции элемента div с помощью css

resize image proportionally with css?

изменять размер изображения не искажая его.

объектами uiimage размер, сохраняя пропорции и ширина

© 2020 &#8212; Вопросы и ответы по программированию

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

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

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

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

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

Изображения

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

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