CSS使图像调整大小并适应任何屏幕 [英] CSS to make images resize and fit any screen the same

问题描述

我一直在使用 http://www.flywavez.com 上的临时页面，但我无法获取图像调整大小并在所有屏幕分辨率下保持相同.在 iPhone 上，它在腰部之前切断了女孩，在分辨率为 1366 x 768 的 19 英寸笔记本电脑屏幕上观看时，它非常适合，甚至当我通过 VGA 将视频从笔记本电脑传输到 55 英寸电视时也是如此.但是，当我在分辨率更高的更大显示器上观看时，图像尺寸结束的地方有很大的空间和明显的视图.我以为我已经调整了 CSS 的大小/* 平板电脑风景 */@media 屏幕和(最大宽度:1060 像素){#wrapper { 宽度:67%;}}

I've been working with a temp page at http://www.flywavez.com but I can't get the image to resize and be the same in all screen resolutions. On the iPhone it cuts the girl off before the waist, and it fits perfectly when viewed on my 19" laptop screen with the res at 1366 x 768, and even when I fed the video to my 55" TV via VGA from my laptop. However when I view at larger monitors with greater resolution, there is a big space and obvious view where the image size ends. I thought I had resizing CSS with /* Tablet Landscape */ @media screen and (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 上看到的一样.

I want this image to display on all resolutions as it does when seen on the 1366 x 768.

感谢您的帮助.

推荐答案

我认为在不损失图像比例的情况下实现您想要做的事情从根本上是不可能的，这可能是不可取的.您是否考虑过使用背景大小"属性?下面的 css 看起来很漂亮:

I think it is fundamentally impossible to achieve what you are trying to do without losing image ratio, which is probably undesirable. Have you considered using the 'background-size' property? The css below achieves a pretty good look:

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/

这篇关于CSS使图像调整大小并适应任何屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！