0

I am creating one website which uses CSS3 fullscreen gallery. This is my first time i am using CSS3 for fullscreen images, rather than JS.

The thing is that the background-size:cover property which i am using is not doing what i think it should be doing. I thought that by using cover, the image is resized by browser, but that it keeps it original aspect ratio, so that nothing is clipped, but this is not happening.

For example, if i am using 1500x900 image on a resolution 1366x768 the image is not scaled rightly, it covers everything, but it cuts off some of it, because the image provided is bigger than the resolution.

Here is the code i use for bg images:

   .image{
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
 }

Also, here is the website test page: http://www.madebym.net/test/index.html Just compare the thumbnails and the bigger images.

Thanks

4

2 に答える 2

2

あなたはおそらく含むことを望みます

これは、両方の寸法が背景配置領域の対応する寸法以下であることを保証しながら、背景画像をできるだけ大きくスケーリングする必要があることを指定します。

cover は、背景イメージを可能な限り小さくスケーリングする必要があることを指定しますが、両方の寸法が背景配置領域の対応する寸法以上であることを確認します。

MDNから

于 2012-08-22T00:49:26.993 に答える