當img高度小於窗口高度時,CSS或jQuery可縮放背景圖像的下方沒有空格



1 Answers

建議由朋友超大 - 這正是我所期待的! 使用核心功能而不是幻燈片版本。 http://www.buildinternet.com/project/supersized/

Question

老人,但是好吃,我知道。 這個問題被問了很多次,但我還沒有確定的答案。 可伸縮的背景圖像,最好是CSS,只要是必須的,都願意使用jQuery。 一個我遇到過的問題(比如用CSS3 background-image)是一個圖片下的空白,當它的高度小於瀏覽器的窗口高度時。 (例如: http : //css-tricks.com/examples/ImageToBackgroundImage/

這是我想要完成的:

  • 保持縱橫比
  • 如果瀏覽器窗口小於圖像大小,則剪裁圖像的高度和寬度
  • 圖像以頁面為中心,因此剪切不會偏移頁面的流向

下面是說明這些目標的一些例子(雖然我認為可以做得更好):

謝謝你,謝謝你,謝謝你。




CSS:

#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}

HTML:

<div id="wallpaper"><img src="bg.jpg"></div>



Related