HTML/CSS：以％屏幕寬度顯示圖像*高達*原始寬度

我想要一個簡單的html代碼，以100％的瀏覽器分辨率寬度顯示圖像，但不能擴展爲大於圖像的原始分辨率寬度。HTML/CSS：以％屏幕寬度顯示圖像*高達*原始寬度

例如，我有一個圖像w /分辨率800x600。我希望在移動網絡瀏覽器上以100％的寬度顯示圖像，但在分辨率大於800x600的計算機瀏覽器上寬度爲800。

這可能嗎？

謝謝！

2015-01-13 brett

問：你總是知道圖像的尺寸？或者是一個動態數字？ – ntgCleaner

當然。一些JS在頁面加載時運行。捕獲屏幕大小，然後基本上設置一個'max-width：size_captured_in_javascript px'。 –

-1

解決方案＃1

如果你能夠在你的CSS鏈接的圖像，你可以使用background-size:contain;屬性contain將調整圖像的大小較小但不大。它不會超出其原始分辨率。

CSS

div { 
    background-image:url("linkhere.com"); 
    background-size:contain; 
}

解決方案＃2 如果你沒有使用像這樣的CSS的奢侈品，那麼你可以寫一些javascript：拳確保您的圖像設置爲100％

img { 
    width:100%; 
}

那麼腳本

var image = new Image(); 
image.src = $(this).attr("src"); 
image.onload = function() { 
    $(this).css({'max-width':this.width+'px'); 
};

解決方案＃3 如果您知道圖片的尺寸，可以將其設置爲內嵌樣式 - 如果您有大量圖片，則可能需要一些時間拳頭確保圖片設置爲100 ％

img { 
    width:100%; 
}

然後在html中寫這樣的東西。

<img src="imagesource.com" style="max-width:800px"/>

我會在網上寫這篇文章，因爲你可能在你將不得不目錄許多圖像。

2015-01-13 19:19:03 ntgCleaner

好的，我已經研究了一下，是的...＃2是滿足問題要求的唯一方法。德勤。但＃1和＃3仍然 - 沒有。 –

@EdT。非常尊重你。謝謝。 1和3是技術上的解決方案，但就你而言，它們不是很好的解決方案。我想我會根據OP技能和技術能力給出一些選擇。我知道我在一家公司工作，在那裏我可能要做＃1或＃3，因爲系統太高了！ – ntgCleaner

夠公平的。我無法想象如何搞砸它必須讓你這麼做...實際上考慮＃3解決方案，它幾乎與＃2解決方案相同，它可以與服務器端語言很好地工作。但是使用＃1解決方案我會哭，你必須指定寬度和高度屬性，否則它將爲0，並且即使將寬度設置爲100％，設置高度也會很痛苦，也需要背景重複：不重複; –

你可以很容易地用CSS來做到這一點。

img { 
    width: 100%; 
    max-width: 800px; 
}

2015-01-13 19:16:16 JakeP

使用CSS，你可以達到你想要的東西：

img { 
 
    max-width: 100%; 
 
} 
 
@media (min-width: 800px) { 
 
    .img { 
 
    max-width: auto; 
 
    } 
 
}

<img class='img' src='http://images5.fanpop.com/image/photos/25000000/Facing-the-wind-the-amazing-world-of-gumball-25060558-588-339.png' />

2015-01-13 19:17:52

我建議你：

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

如果您使用的引導你可以傳遞類來選擇。即

<img class="img-responsive>

包裝成一個div和800像素添加一個最大寬度到包裝

2015-01-30 04:36:55 Mike

HTML/CSS：以％屏幕寬度顯示圖像高達原始寬度