如何放大100％的頁面寬度圖像以保持固定高度

我希望圖像跨越網頁的整個寬度（980像素到2000像素）。當我只將寬度：100％指定爲圖像時，爲了保持縱橫比，圖像的高度對於大尺寸屏幕來說也變得相當大。如何放大100％的頁面寬度圖像以保持固定高度

<img src="imageFileName.jpg" width=100% />

爲了避免身高問題，我已經看到了很多網站放大圖像，寬度停留在網頁的100％，並且他們保持高度固定。

任何人都可以請告訴我如何放大圖像，以便我可以保持圖像的高度固定，並且圖像可以擴展到100％的頁面寬度。縮放部分將有助於保持縱橫比一致。

如果只有css解決方案將是非常好的。謝謝。（我找不到谷歌搜索的答案，所以在這裏發佈一個問題）

來源

2014-10-10 dev-vb

創建一個div元素與所需的高度和高度。然後將圖像設置爲該div的背景。然後，您可以根據需要跨越背景。

div { 
    background: url(img_flwr.gif); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

來源

2014-10-10 04:15:37

你可以使用jQuery修復圖像100％的高度

<img src="imageFileName.jpg" width=100% id="image"/> 


function img_height() 
{ 
    $("#image").height($(window).height()); 
} 

$(window).scroll(img_height); 
$(window).resize(img_height);

您還可以使用$("#page_width").height()代替$(window).height()

來源

2014-10-10 04:17:32

如何放大100％的頁面寬度圖像以保持固定高度

回答

相關問題