Как сделать изображение по размеру блока css

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

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

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

Подогнать размеры картинки под размеры кнопки автоматически
Есть кнопка button1 и файл изображения trololo.bmp. Картинка прямоугольная и больше кнопки, кнопка.

Масштабирование с сохранением пропорций
Господа, можно ли добиться такогоже эффекта но без использование JS, на чистом CSS.

Лучший ответСообщение было отмечено alanat как решение

Решение

Сообщение от galawar

Изображение заполняет весь div, пропорции изображения не сохраняются.

Добавлено через 6 часов 55 минут

Сообщение от galawar

Для IE в тегах img добавить data-object-fit=’cover’

Сообщение от galawar
Лучший ответСообщение было отмечено alanat как решение

Решение

Сообщение от galawar

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

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

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

Картинка на всю высоту с сохранением пропорций
У меня fixed-блок, в нём картинка, которая должна быть на всю высоту, но максимум на всю ширину.

Пакетная обработка изображений с сохранением пропорций
Здравствуйте. Суть такова: есть например 1000 фото с расширением 2000х3000 или 1500х1200 и др., но.

Как img во весь div?

04e315f852444a9a88329f3a2de3457e.jpg

есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, т.е. может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.
сделать это если картинку пихать из css бекграундом и background-size:cover; — получилось, но надо сделать через img

зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.

Автоподгон, авторесайз изображения под DIV

Имеется некий div с классом .img-container и внутри картинка.

Истинные размеры картинки — могут быть любые. Внимание! Вопрос.

Как сделать так чтобы картинка вписывалась в размер DIV по ширине и высоте, и пропорционально увеличивалась или уменьшалась, если DIV будет менять размеры (а он будет менять размеры)?

Аналог на CSS для DIV:

10 ответов 10

вот пример когда контейнер ресайзится в результате ресайза окна

если хотите без jQuery, это реально, но делайте сами 🙂

Попробуйте сделать так:

Обновление

Если не получится, попробуйте так

Средствами CSS это сложно реализовать (попробуйте в мой пример у .img-container в height подставить 300px; ). Можно попробовать с пом. ajax вычислять широту и высоту контейнера и отдавать параметры картинке img.

А ларчик то просто открывается.

И будут у вас ВСЕ картинки на сайте подгоняться под размер вашего дива. Хоть со старта, хоть при таскании ширины/высоты окна браузера. И это применимо ко всему. Хоть картинка, хоть видео, хоть ещё что-то, что придумаете. Учите цсс и хтмл, прежде чем заниматься жабой.

Думаю тут проще было бы все сделать через background:

Если хочешь добавить адаптивность, еще один блок выше создай, сделай его flex, задай атрибут flex-wrap: wrap

Если через CSS, у тебя div с определенным классом, присвой картинке этот же класс, у тебя получится картинка такой же формы что и тот div в который ты ее "запихиваешь". И как раз таки при изменении параметров div’a этого класса, картинка будет тоже изменяться (увеличишь div в двое, то и картинка увеличится в двое). Так что если все грамотно сделать через классы, то это должно тебе помочь. Это мое субъективное мнение и как вариант помочь решить твою "проблему"

Для .img-container пишем следующее:

Для img пишем следующее:

Свойство width задавать не надо, его менять на width: auto; нужно только в том случае, если это свойство было переопределено (например стилями браузера, подключенными библиотеками и т.д)

Суть в следующем:

Если задать для img width: 100% , то он растянет его на всю ширину блока. Поэтому мы задаем ему только height: 100% , тогда изображение влезет целиком, но не растянется. Свойство width вроде по дефолту стоит в auto , поэтому пропорции возьмутся из исходного состояния.

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

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