整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tml中img圖片進行等比例縮放的實例代碼
HTML中，要修改img元素定義的圖片的大小，且是等比例縮放，不改變寬和高的比值，那么可以采用只設置img元素屬性中width和height中的任何一個，不要同時設置兩個即可實現img圖片的等比例縮放效果。下面將通過兩個實例來分別實現這兩種方法。
為了可以與原圖片的大小進行對照，下面的實例使用HTML的注釋符號將等比例縮放的代碼進行了注釋，第一遍運行完之后，可以將第一行的代碼刪除（在線刪除，因為這是一個在線編輯器），然后將第二行代碼中的注釋符號去除掉，接著再運行一遍看看等比例縮放的效果：
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->這邊的代碼與上面的幾乎一樣，只是將width的屬性修改成為height的屬性，如下：
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->提示：如上面的兩個實例，將width和height分別設置為50%都可以等比例縮放圖片，但得到的圖片的大小不一定一樣。
當然了，如果要通過同時設置img圖片的width和height兩個屬性來達到等比例縮放圖片的話也是可以的，但是要先計算一下圖片的寬度和高度的比例，之后再等比例縮放。
來源：笨鳥工具-璞玉天成，大器晚成
原文：html img圖片等比例縮放的代碼 | HTML教程
免責聲明：內容僅供參考，不保證正確性
lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網站頁面</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
body {
background-color: #FFFFFF;
text-align: center;
font-family: "宋體";
font-size: 12px;
color: #575757;
}
#banner {
height: 210px;
width: 982px;
margin: 0 auto;
}
#menu {
height: 87px;
width: 982px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<div id="banner"><img src="images/203.jpg" width="982" height="210" alt="banner" /></div>
<div id="menu"><img src="images/204.jpg" width="223" height="80" alt="gamestart" />
<img src="images/205.jpg" width="106" height="80" alt="menu1" />
<img src="images/206.jpg" width="102" height="80" alt="menu2" />
<img src="images/207.jpg" width="105" height="80" alt="menu3" />
<img src="images/208.jpg" width="100" height="80" alt="menu4" />
<img src="images/209.jpg" width="77" height="80" alt="menu5" />
<img src="images/210.jpg" width="86" height="80" alt="menu6" />
<img src="images/211.jpg" width="77" height="80" alt="menu7" />
<img src="images/212.jpg" width="106" height="80" alt="menu8" /></div>
</div>
</body>
</html>
根據我們的案例，邊框、邊界、邊距都設置成0了，圖片與圖片之間還是有空隙，這是為什么呢？
記得之前解決的方法是，img標簽符之間不要有空格或者回車。
就是寫成這樣的
還有些其他的方法，可以讓其在水平方向上不留下空隙，也就是左右的空隙，比如
#menu { font-size:0;} //意思是父級元素的字體大小為0，img默認是根據父元素的baseline進行對齊的，把父元素的字體大小設置為0，就沒有空隙了，作為子元素的img對齊相應的也就沒有空隙了
#menu {letter-spacing:-600px}
般來說，我們在做banner切換的時候，經常用背景來代替插入img圖片 ，但是圖片有很好的伸縮性，但是插入背景卻沒有 ，如果能夠讓banner切換是背景圖又能自適應屏幕寬高呢？ 其實有辦法可以解決 ，用padding-bottom 可以解決。
我想起切版網幾個月前給客戶做的仿國外網站的web前端外包項目，剛好就用到了padding-bottom， 而它的原理很簡單：
因為垂直方向的padding值，根據寬度的大小來計算的。
方法如下：
<style>
.wrap{
width: 100%;
}
.banner{
width: 100%;
max-width: 490px; /**圖片的寬度不大于圖片實際像素**/
height: 0;
max-height: 329px;
padding-bottom: 67.14%; /**根據圖片高寬比計算*/
margin: 0 auto;
background: url("images/test.jpg") no-repeat center;
background-size: cover;
}
@media only screen and (min-width: 490px) {
/**屏幕大于490時，將背景框高度設置為圖片高度的實際像素**/
.banner{
height: 329px;
padding-bottom: 0;
}
}
</style>
<div class="wrap">
<!--role屬性 aria-label屬性增強html的可讀性，更語義化-->
<div role="img" aria-label="banner img" class="banner"></div>
</div>
轉自切版網 （qieban.cn）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
