更改圖片的寬度和高度根據設備/瀏覽器的大小

我有這個div：更改圖片的寬度和高度根據設備/瀏覽器的大小

<div id="background"> 
      <img src="imagenes/index.jpg" height="auto" width="100%"/> 
</div>

這個CSS：

#background { 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0%; 
left: 0%; 
right: 0%; 
z-index: -1; }

我想知道是否有改變形象的一種方法高度/寬度取決於設備/瀏覽器的高度/寬度是否更大，以便圖像可以覆蓋整個屏幕。

我知道改變高度=「100％」width =「auto」會是一個很好的選擇，如果設備/瀏覽器更高，但如果它枯萎它不是。

任何好主意？

來源

2014-01-21 arturojain

尋找[響應] –

圖像是一個肖像或風景？你想在縱向設備還是橫向設備上使用它？ – Idris

通常，當您定位移動設備時，應該使用media queries。然而，在你的情況下，它只是一個全屏幕的背景，所以你可以使用background-size物業位置：

#background { 
    background: url(imagenes/index.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

注意：此屬性只支持現代瀏覽器，舊版本的IE（< 8），你可以嘗試使用此IE過濾器：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg', 
sizingMethod='scale'); 

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg', 
sizingMethod='scale')";

來源

2014-01-21 02:08:29 Felix

使用此做出響應的圖像：

img { 
    width: 100%; 
    max-width: 100%; 
    height: auto; 
}

來源

2014-01-21 02:09:17

如果你可以設置一個特定的值，您可以嘗試@media功能。

#background 
{ 
    height:100%; 
    width: 100%; 
} 
@media(max-width:1000px){ 
    #background{ 
     height:1000px; 
     width: 800px; 
    } 
}

來源

2014-01-21 02:13:33

@media all and (min-width: 768px) and (max-width: 1024px) { 
    .pr { 
     display: none; 
    } 
    //write here rest of code that will vanish when the screen is smaller then 1024px 
    }

希望這有助於！我用它爲我的一些項目，工作像魅力消失一些東西:)

來源

2014-01-21 02:19:45

更改圖片的寬度和高度根據設備/瀏覽器的大小

回答

相關問題