[英]Keeping an image centered, while maintaining 100% height and only extending/cropping the sides
我有一個用戶圖像,我想通過窗口縮放該圖像,以使高度始終為100%,並且圖像保持居中。
此示例隨着調整窗口大小而縮放,但高度不會保持在100%,因此會在底部被截斷。
.user {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
這個示例非常完美,除了瀏覽器窗口的寬度小於圖像的寬度之外,右側的內容也被切除。
我確實希望對圖像進行裁剪,但是我希望對左右兩側進行均等的裁剪。
.user {
object-position: center;
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
}
這是當瀏覽器水平/垂直縮放時如何顯示圖像的示例。
一個想法是使用這樣的多個背景:
我用多個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>
更新資料
為了避免在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>
我喜歡你的問題! 我從另一個角度進行了研究,並嘗試使用背景而不是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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.