Как правильно сверстать?

Question

[Linberg07]

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

Comments

[Ankhena]

Как правильно

эти картинки, у всех разные размеры

Шепотом: сделать одинаковыми.

Правда, они все прибиты к правому краю, так что можно и просто object-fit

Answer 1

[Андрей Федоров]

.item {
background-image: url(someimg.jpg);
background-repeat: no-repeat;
background-size: auto 300px;
background-position: right bottom;
}

Comments

[Linberg07]

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

[Андрей Федоров]

Linberg07, ну дак поэкспериментируйте. У вас же код перед глазами. Напримерbackground-position: right 3.6em;

Answer 2

[ForSureN1]

Проще всего поставить картинку абсолютом с right: 0; bottom: 0, так же дать ей object-fit: contain, и ограничить по max-width и max-height

.img-class {
position: absolute;
right: 0;
bottom: 0;
max-width: 300px;
max-height: 300px;
width: auto;
height: auto;
object-fit: contain;
}