CSS使图像调整大小并适合任何屏幕

Posted

技术标签:

【中文标题】CSS使图像调整大小并适合任何屏幕【英文标题】:CSS to make images resize and fit any screen the same 【发布时间】:2013-11-12 06:53:33 【问题描述】:

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

感谢您的帮助。

【问题讨论】:

【参考方案1】:

我认为在不损失图像比例的情况下实现你想要做的事情基本上是不可能的,这可能是不可取的。您是否考虑过使用“背景尺寸”属性?下面的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/

【讨论】:

抱歉这么晚才回来,不过她的身体好像只露出了一半。 (我也想要腿)哈哈。 实际上确实有效。我只是看着小提琴并看到了图像。希望它会缩小到其他尺寸的rez。现在检查我的 iPhone。【参考方案2】:

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

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

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;
    

【讨论】:

【参考方案3】:

基本上,这就是你所需要的:

body 
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;

【讨论】:

以上是关于CSS使图像调整大小并适合任何屏幕的主要内容,如果未能解决你的问题,请参考以下文章

无法使用 CSS 调整图像大小

如何水平调整图像大小(通过 CSS)以适合框?

如何使背景图像跨越每个表格行并使用 HTML 和/或 CSS 动态调整大小?

在 CSS FlexBox 布局中自动调整图像大小并保持纵横比?

CSS如何使文本像图像一样缩放

无法让 UIImageView 调整大小以适应屏幕