JSFiddle - React, Tailwind, and code Playground

by Talker

HTML

<div class="container">
    <h3>узкая картинка</h3>

    <div><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-04/tmp/webdr02/2/17/0e7cd6da3ce720d983515a9ab831a530-3.jpg" height="90" alt=""></div>

    <p>фоновая</p>
    <div class="img-cover">
        <div class="img-bg img1"></div>
    </div>

    <p>IMG</p>
    <div class="img-cover">
        <img class="img" src="https://img.buzzfeed.com/buzzfeed-static/static/2014-04/tmp/webdr02/2/17/0e7cd6da3ce720d983515a9ab831a530-3.jpg" width="90" alt="">
    </div>
</div>


<div class="container">
    <h3>широкая картинка</h3>
    <div><img src="https://files.brightside.me/files/news/part_27/272960/preview-7999910-650x341-98-1481009020.jpg" height="90" alt=""></div>

    <p>фоновая</p>
    <div class="img-cover">
        <div class="img-bg img2"></div>
    </div>

    <p>IMG</p>
    <div class="img-cover">
        <img class="img" src="https://files.brightside.me/files/news/part_27/272960/preview-7999910-650x341-98-1481009020.jpg" alt="">
    </div>

</div>

CSS

.container {
  display: inline-block;
  margin-right: 50px;
}

.img-cover {
    -display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
}

img.img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.img-bg {
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 0;
}

.img1 {
    background-image: url("https://img.buzzfeed.com/buzzfeed-static/static/2014-04/tmp/webdr02/2/17/0e7cd6da3ce720d983515a9ab831a530-3.jpg")
}

.img2 {
    background-image: url("https://files.brightside.me/files/news/part_27/272960/preview-7999910-650x341-98-1481009020.jpg")
}