I have a user image, which I want to scale up and down with the window so that the height is always 100% and the image stays centered.
This example scales as the window is resized, but the height doesn't stay at 100% and therefore gets cut off at the bottom.
.user {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
CodePen Example 1
This example works perfectly, apart from when the width of the browser window is smaller than the width of the image, the right-hand side is cut off.
I do want the image to be cropped, but I want the right and left sides to be cropped equally.
.user {
object-position: center;
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
}
CodePen Example 2
Here is an example of how I want the images to appear when the browser is scaled horizontally/vertically.
An idea is to use multiple background like this:
I used multiple div to illustrate with different sizes
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>
Update
To avoid using the image within CSS you can consider the inline style and a separate div for the user image so that you have almost the same markup as using an image tag:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With