Как сверстать такое?

Question

[Serezha]

есть такой блок , как мне сверстать к нему вот такие елементы как на скрине

вот что есть по коду

<div class="profiles__main">
        <div class="profiles__background">
         </div>
</div>

.profiles__main{
background-color:#fff;
height:270px;
border-radius:5px
}
.profiles__background{
background-image:url(http://localhost/vs/template/img/injustice-2-betmen-flesh-geroi.jpg);
background-size:cover;
height:200px;
background-repeat:no-repeat;
border-radius:5px 5px 0 0;
}

Answer 1

[bxspb]

https://codepen.io/Jazz13666/pen/qBEWGYr

Comments

[Владимир Куликов]

Для ровного круга, можно эти стили добавить.

.image{
    float: left;
    margin-right: 40px;
    width: 100px;
    height: 100px;
}
.image>img {
    width: 100px;
    height: 100%;
    border-radius: 360px;
    border: 2px solid #fff;
}

[bxspb]

Валерий Иванов, изображение будет либо растягиваться либо обрезаться при width: 100px;
height: 100%; нужно уж тогда делать фоном с cover, или грузить из php картинку с равным соотношением сторон.

[WapSter]

bxspb, https://developer.mozilla.org/ru/docs/Web/CSS/obje...

[bxspb]

WapSter, у object-fit кроссбраузерность не ахти, еще плясать с js придется. Лучше уж бэкграундом

[Serezha]

а как сделать такое ?