[英]CSS - Background-size: Cover is too big
當我嘗試使用具有固定位置的 background-size:cover 屬性時,我的圖像變得太大,並被裁剪。 我希望它與原始圖像的大小相同,但我無法弄清楚。 我試圖保持圖像保持原位的影響。
#wrapper {
width:100%;
height:580px;
background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg');
background-position: center center;
background-attachment:fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
/*background-size:cover;*/
-webkit-transition: background-image 0.4s;
-moz-transition: background-image 0.4s;
-ms-transition: background-image 0.4s;
-o-transition: background-image 0.4s;
transition: background-image 0.4s;
overflow: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
這是我的演示
全屏演示
試試這個覆蓋:
#wrapper {
background-size:contain;
}
也許封面不是答案..來自W3schools:“將背景圖像縮放到盡可能大,使背景區域完全被背景圖像覆蓋。背景圖像的某些部分可能不在背景中。定位是
正如其他人所提到的,使用background-size: contain
可能是一種選擇。
但是,如果裁剪了一點圖像沒問題,那么您可能更願意嘗試以下組合:
background-size: cover;
background-position: center;
當圖像至少居中時,裁剪通常看起來不那么糟糕。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.