如何讓文章中的照片自動縮圖以符合版面呢?
不管是網路論壇或是網誌,
常常都會受限於版型而必須縮小照片,
不然就會因為照片超過大小而弄亂了整個版面!
但除了手動調整外,
(設定width=”xxx” height=”xxx”,或直接在用MOUSE縮拉照片的大小 → 這都要用手做動作調整!呵呵…)
是不是可以從程式面一次執行呢?
答案是可以的喔!
你只需要在你使用的版型中的style.css中放入下列的code即可:
img {
max-width:570px;height:auto;
zoom:expression( function(elm) {
if (elm.width>>570) {
var oldVW = elm.width; elm.width=560;
elm.height = elm.height*(560 /oldVW);}
elm.style.zoom = '1';}(this));
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > >570)?"560px":"auto"});}
↑ 上面的CODE是對整個網誌中凡寬超過600的照片做比例縮圖,上列數字可以視個人需要修改
#div img {
max-width:570px;height:auto;
zoom:expression( function(elm) {
if (elm.width>>570) {
var oldVW = elm.width; elm.width=560;
elm.height = elm.height*(560 /oldVW);}
elm.style.zoom = '1';}(this));
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > >570)?"560px":"auto"});}
↑ 上面的CODE中,#div是則是對某一特定區域(如#content)的照片做縮圖的動作
以我個人的BLOG做例子(請注意照片中的紅框處),如下:
設定前
設定後
PS.照片本身為1005*550
本篇文章參考:
http://blog.asikart.com/-joomla-31/128-cssdiv.html
http://it.big5.enorth.com.cn/system/2008/06/16/003403673.shtml
本篇文章引用網址: