Saving the image in the center, while maintaining 100% height and only expand / crop the sides

Question

Problem

I have a user image that I want to scale up and down using the window so that the height is always 100% and the image remains centered.

---

Example 1

This example scales as the window resizes, but the height does not remain at 100% and therefore is cropped at the bottom.

.user {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}

CodePen Example 1

---

Example 2

This example works great, in addition, when the width of the browser window is less than the width of the image, the right side is cropped.

I want the image to be cropped, but I want the right and left sides to be cropped the same way.

.user {
    object-position: center;
    display: block;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

CodePen 2 Example

---

Visual example

Here is an example of how I want the images to display when the browser is scaled horizontally / vertically.

Answer 1

, , :

div

body,
html {
  height: 100vh;
  margin: 0;
}

.bg-shine {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%, cover;
  background-image: url("https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png"), url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}

<div style="display: inline-block;">
  <div class="bg-shine" style="height:100px;width:400px;">

  </div>
  <div class="bg-shine" style="height:100px;width:200px;">

  </div>
</div>
<div style="display: inline-block;">
  <div class="bg-shine" style="height:200px;width:100px;">

  </div>
</div>

Hide result

CSS, div , , :

body,
html {
  height: 100vh;
  margin: 0;
}

.bg-shine {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}

.bg-shine>div {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height:100%;
}

<div style="display: inline-block;">
  <div class="bg-shine" style="height:100px;width:400px;">
    <div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
  </div>
  <div class="bg-shine" style="height:100px;width:200px;">
    <div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
  </div>
</div>
<div style="display: inline-block;">
  <div class="bg-shine" style="height:200px;width:100px;">
    <div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
  </div>
</div>

Hide result

Answer 2

! , img. , :

https://codepen.io/Varin/pen/xYqXQe

body, html {
	height: 100vh;
	margin: 0;
}

.bg-shine {
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("http://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
  position: relative;
}

.image {
  
  padding:0;
  margin:0;
  width: 100%;
  height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background-image:url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

	<div class="bg-shine">
    <div class="image">
		</div>
  </div>

Hide result