Как в блоке для картинки вывести картинку без изменения соотношения блока или картинки?

Question

[ortsuev33]

Как в блоке для картинки вывести картинку без изменения соотношения блока или картинки?
пример есть блок 400на 400 и картинка 600 на 600 как сделать так чтобы картинка вставилась как обрезанная в этот блок?

Answer 1

[Арсений Матыцин]

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

.image{
background-image: url(...);
background-position: center;
background-size: cover;

PS: если же нужно именно обрезать, то смотри правила background-size. Или в сторону overflow:hidden с использование непосредственно изображения.

Comments

[ortsuev33]

А для тега image нету вариантов?

[Арсений Матыцин]

ortsuev33, есть, конечно, выше добавил про overflow, но вообще если делать именно с картинкой при user-input, то начинаются танцы с бубном либо CSS, либо JS. Так что если картинка не из тех, что в первую очередь должны уйти в индекс поиска, то фоном это «зе бест»-решение.

[archelon]

ortsuev33, см. object-fit
https://developer.mozilla.org/ru/docs/Web/CSS/obje...
но бэкграундом надежнее

[Арсений Матыцин]

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

[ortsuev33]

Арсений Матыцин, не понял на счет индекса поиска

[Арсений Матыцин]

ortsuev33, индексация поисковыми ботами

[ortsuev33]

Арсений Матыцин, понял спасибо