響應式web網頁開發中，如果要求無論是PC端還是移動端，網頁都要鋪滿整個屏幕，並且圖片要隨着屏幕進行自動縮放。圖片自動縮放很容易想到用百分比來設定寬高，可是用百分比形式設置圖片的寬高，那么不管是放大還是縮小，瀏覽器都將保持圖像的寬高比例。這意味着圖像的高度與寬度之比將不會發生變化，圖像也就不會發生扭曲。這也會引發一個問題，那就是當瀏覽器只是寬度改變而高度不變時，圖片默認下寬度是隨着瀏覽器變化而變化，而圖片的高度也會歲寬度發生改變。原本想要的是當屏幕寬度改變高度不變的時候，圖片也只是寬度改變高度不變，這可怎么辦呢？
當給圖片寬高設定百分比時，屏幕寬度改變高度不變，圖片寬高都會發生改變，如下代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用圖片</title>
<style type="text/css">
img{
width: 60%;
height: 50%;
}
</style>
</head>
<body>
<img src="http://anshun.wedsoso.com/uploadfile/1302/11301221423571361427837432.jpg" alt="">
</body>
</html>
屏幕寬度改變高度不變，圖片也只是寬度改變高度不變
解決方案：給窗口添加一個resize（）事件，屏幕改變的時候獲取而屏幕的寬高，然后按照一定的比例對圖片進行縮放，值得注意的是，瀏覽器還沒有改變的之前圖片也要按照一定的比例進行縮放，所以要在事件外面給圖片設定同樣的寬高比例。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用圖片</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
img{
width: 60%;
height: 50%;
}
</style>
</head>
<body>
<img src="http://anshun.wedsoso.com/uploadfile/1302/11301221423571361427837432.jpg" alt="">
<script type="text/javascript">
$("img").width(document.documentElement.clientWidth*0.6);
$("img").height(document.documentElement.clientHeight*0.5);
$(window).resize(function() {
$("img").width(document.documentElement.clientWidth*0.6);
$("img").height(document.documentElement.clientHeight*0.5);
});
</script>
</body>
</html>