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

问题描述

我一直在 http://www.flywavez.com 使用临时页面，但我无法获取图片调整大小和在所有屏幕分辨率相同。在iPhone上，它在腰部之前切断女孩，当我在19英寸的笔记本电脑屏幕上观看时，它的分辨率为1366 x 768，甚至当我通过VGA从我的笔记本电脑将视频馈送到我的55电视时。然而，当我在更大的分辨率下观看更大的显示器，有一个大的空间和明显的视图，图像大小结束。我想我已经调整CSS与
/ *平板风景* /
@media屏幕和（max-width：1060px）{
#wrapper {width：67％; }
}

  / * Tabled Portrait * / 
 @media屏幕和（max-width：768px ）{
 #wrapper {width：100％; } 
} 
 
 / * Tabled Portrait * / 
 @media screen和（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％; } 
} 
  

我希望此图像显示在所有分辨率

解决方案

感谢您的帮助。

<我认为从根本上不可能实现你想做而不失去图像比，这可能是不可取的。你考虑过使用'background-size'属性吗？下面的css看起来很漂亮：

  body {
 background：url（'images / sexy-girl-无重复固定; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
} 
  

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

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%; }
    }

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

Thanks for any help.

解决方案

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/sexy-girl-listening.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

You can see it here: http://jsfiddle.net/DTN54/

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