CSS使圖像調整大小和適合任何屏幕相同

我一直在使用臨時頁面http://www.flywavez.com，但我無法調整圖像大小並在所有屏幕分辨率下都是相同的。在iPhone上，它可以在女性脫離腰部之前將其切斷，在我的19英寸筆記本電腦屏幕上觀看，分辨率爲1366 x 768，甚至當我通過VGA從筆記本電腦通過VGA將視頻輸入到55英寸電視時，它都非常合適。但是，當我在更大分辨率的較大顯示器上觀看時，圖像尺寸結束時存在很大的空間和明顯的視圖。我認爲我已經調整了CSS的大小，使用 /* Tablet Landscape */ @media screen和（max-width：1060px）{wrapper {width：67％; }} CSS使圖像調整大小和適合任何屏幕相同

/* 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 * 768

感謝您的幫助確實看到對所有決議顯示。

來源

2013-11-01 abtecas

我認爲在不損失圖像比率的情況下實現您所要做的事情基本上是不可能的，這可能是不可取的。您是否考慮過使用「背景大小」屬性？下面的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-01 04:21:35 onestepcreative

抱歉這麼晚才和你在一起，但它好像只有她身體的一半顯示。（我也想要腿）哈哈。 – abtecas

實際上確實有效。我只是看着小提琴，看到了圖像。不過希望它會縮小到其他尺寸。現在檢查我的iPhone。 – abtecas

覆蓋該關鍵字指定背景圖像的規模應同時確保它的兩個尺寸要儘可能小大於或等於背景定位區域的對應尺寸。

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-21 07:29:21

基本上，這是你所需要的：

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

來源

2016-12-13 11:40:02

CSS使圖像調整大小和適合任何屏幕相同

回答

相關問題