[英]Keeping an image centered, while maintaining 100% height and only extending/cropping the sides
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. 我有一个用户图像,我想通过窗口缩放该图像,以使高度始终为100%,并且图像保持居中。
This example scales as the window is resized, but the height doesn't stay at 100% and therefore gets cut off at the bottom. 此示例随着调整窗口大小而缩放,但高度不会保持在100%,因此会在底部被截断。
.user {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
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;
}
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 我用多个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>
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: 为了避免在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>
I like your question! 我喜欢你的问题! I approached it from a different angle, and tried to use background rather than img element.
我从另一个角度进行了研究,并尝试使用背景而不是img元素。 Please see the results here:
请在此处查看结果:
https://codepen.io/Varin/pen/xYqXQe 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.