如何利用CSS自動(dòng)調(diào)整圖片的大小
2018-11-01 來(lái)源：學(xué)做網(wǎng)站論壇
經(jīng)常更換wordpress主題，會(huì)有一個(gè)困擾，就是之前主題的內(nèi)容區(qū)域?qū)挾缺容^大，很多正文圖片的尺寸可能是500px,而換了一個(gè)主題，內(nèi)容區(qū)域的寬度比較小，假設(shè)是400px， 這時(shí)原先的圖片寬度都是500px，這樣就會(huì)撐大整個(gè)容器，造成頁(yè)面布局混亂。
下面介紹的CSS知識(shí)是利用CSS等比例縮小圖片，這樣就可以完美的顯示在你的新主題上了。（如果你不了解CSS，請(qǐng)學(xué)習(xí)CSS視頻教程）
首先找到內(nèi)容區(qū)域的樣式，一般是.entry這個(gè)類，在style.css中增加以下代碼就可以搞定了,方法如下:
.entry img {max-width: 400px}
.entry img {
zoom:expression( function(elm) {
if (elm.width>400) {
var oldVW = elm.width; elm.width=400;
elm.height = elm.height*(400 /oldVW);
}
elm.style.zoom = '1';
}(this));
}
.entry img {
zoom:expression( function(elm) {
if (elm.width>400) {
var oldVW = elm.width; elm.width=400;
elm.height = elm.height*(400 /oldVW);
}
elm.style.zoom = '1';
}(this));
}
根據(jù)你的主題內(nèi)容區(qū)域的實(shí)際尺寸來(lái)設(shè)定圖片最大寬度，只要小于等于這個(gè)寬度即可。將所有出現(xiàn)400px的地方改成你的寬度就好了。
標(biāo)簽： 代碼
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
最新資訊
熱門推薦