15

我一直在http://www.flywavez.com使用临时页面，但我无法调整图像大小并在所有屏幕分辨率下都相同。在 iPhone 上，它切断了女孩的腰部，当我在 19 英寸笔记本电脑屏幕上以 1366 x 768 分辨率观看时，它非常适合，甚至当我通过笔记本电脑通过 VGA 将视频馈送到我的 55 英寸电视时也是如此。但是，当我在分辨率更高的大型显示器上观看时，图像尺寸结束的地方有很大的空间和明显的视野。我以为我已经用 /* Tablet Landscape */ @media screen 和 (max-width: 1060px) { #wrapper { width:67%; } }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

     /* iphone */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        img { max-width: 100%; }
    }

    /* ipad */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
    }

我希望此图像以所有分辨率显示，就像在 1366 x 768 上看到的一样。

谢谢你的帮助。

4

3 回答 3

27

我认为在不丢失图像比例的情况下实现你想要做的事情从根本上是不可能的，这可能是不可取的。您是否考虑过使用“背景尺寸”属性？下面的 css 看起来很漂亮：

body {
    background: url('images/example.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

你可以在这里看到它：http: //jsfiddle.net/DTN54/

于 2013-11-01T04:21:35.627 回答
7

cover 该关键字指定背景图片在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，应尽可能缩小。

contains 这个关键字指定背景图片在保证两个尺寸都小于或等于背景定位区域对应尺寸的情况下，应该尽可能的放大。所以尝试使用包含而不是覆盖

100% 这将 100% 缩放到高度和宽度，而不进行任何裁剪。

body {
        background: url('images/example.jpg') no-repeat fixed;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
于 2014-10-21T07:29:21.103 回答
0

基本上，这就是您所需要的：

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
于 2016-12-13T11:40:02.610 回答