整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
tml中img圖片進(jìn)行等比例縮放的實(shí)例代碼
HTML中，要修改img元素定義的圖片的大小，且是等比例縮放，不改變寬和高的比值，那么可以采用只設(shè)置img元素屬性中width和height中的任何一個(gè)，不要同時(shí)設(shè)置兩個(gè)即可實(shí)現(xiàn)img圖片的等比例縮放效果。下面將通過(guò)兩個(gè)實(shí)例來(lái)分別實(shí)現(xiàn)這兩種方法。
為了可以與原圖片的大小進(jìn)行對(duì)照，下面的實(shí)例使用HTML的注釋符號(hào)將等比例縮放的代碼進(jìn)行了注釋，第一遍運(yùn)行完之后，可以將第一行的代碼刪除（在線刪除，因?yàn)檫@是一個(gè)在線編輯器），然后將第二行代碼中的注釋符號(hào)去除掉，接著再運(yùn)行一遍看看等比例縮放的效果：
<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%"> -->提示：如上面的兩個(gè)實(shí)例，將width和height分別設(shè)置為50%都可以等比例縮放圖片，但得到的圖片的大小不一定一樣。
當(dāng)然了，如果要通過(guò)同時(shí)設(shè)置img圖片的width和height兩個(gè)屬性來(lái)達(dá)到等比例縮放圖片的話也是可以的，但是要先計(jì)算一下圖片的寬度和高度的比例，之后再等比例縮放。
來(lái)源：笨鳥工具-璞玉天成，大器晚成
原文：html img圖片等比例縮放的代碼 | HTML教程
免責(zé)聲明：內(nèi)容僅供參考，不保證正確性
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>網(wǎng)站頁(yè)面</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>
根據(jù)我們的案例，邊框、邊界、邊距都設(shè)置成0了，圖片與圖片之間還是有空隙，這是為什么呢？
記得之前解決的方法是，img標(biāo)簽符之間不要有空格或者回車。
就是寫成這樣的
還有些其他的方法，可以讓其在水平方向上不留下空隙，也就是左右的空隙，比如
#menu { font-size:0;} //意思是父級(jí)元素的字體大小為0，img默認(rèn)是根據(jù)父元素的baseline進(jìn)行對(duì)齊的，把父元素的字體大小設(shè)置為0，就沒(méi)有空隙了，作為子元素的img對(duì)齊相應(yīng)的也就沒(méi)有空隙了
#menu {letter-spacing:-600px}
般來(lái)說(shuō)，我們?cè)谧鯾anner切換的時(shí)候，經(jīng)常用背景來(lái)代替插入img圖片 ，但是圖片有很好的伸縮性，但是插入背景卻沒(méi)有 ，如果能夠讓banner切換是背景圖又能自適應(yīng)屏幕寬高呢？ 其實(shí)有辦法可以解決 ，用padding-bottom 可以解決。
我想起切版網(wǎng)幾個(gè)月前給客戶做的仿國(guó)外網(wǎng)站的web前端外包項(xiàng)目，剛好就用到了padding-bottom， 而它的原理很簡(jiǎn)單：
因?yàn)榇怪狈较虻膒adding值，根據(jù)寬度的大小來(lái)計(jì)算的。
方法如下：
<style>
.wrap{
width: 100%;
}
.banner{
width: 100%;
max-width: 490px; /**圖片的寬度不大于圖片實(shí)際像素**/
height: 0;
max-height: 329px;
padding-bottom: 67.14%; /**根據(jù)圖片高寬比計(jì)算*/
margin: 0 auto;
background: url("images/test.jpg") no-repeat center;
background-size: cover;
}
@media only screen and (min-width: 490px) {
/**屏幕大于490時(shí)，將背景框高度設(shè)置為圖片高度的實(shí)際像素**/
.banner{
height: 329px;
padding-bottom: 0;
}
}
</style>
<div class="wrap">
<!--role屬性 aria-label屬性增強(qiáng)html的可讀性，更語(yǔ)義化-->
<div role="img" aria-label="banner img" class="banner"></div>
</div>
轉(zhuǎn)自切版網(wǎng) （qieban.cn）
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
