我現(xiàn)在在做一個div的拖拽，當我把一張圖片從一個比較大的DIV中拖到一個較小的DIV中時，怎樣才能使圖片自動變小，以適應那個小的DIV的？還是我只能通過JS代碼來實現(xiàn)呢？還是我的做一張小的圖片呢？
3 回答
慕虎7371278
TA貢獻1802條經(jīng)驗 獲得超4個贊
js版和css版自動按比例調(diào)整圖片大小方法，分別如下：
<title>javascript圖片大小處理函數(shù)</title>
<script language=Javascript>
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate <= 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
</script>
</head>
<body>
<img src="999.jpg" border=0 width="150" height="110" onload=proDownImage(this); />
<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this); />
</body>
純css的防止圖片撐破頁面的代碼，圖片會自動按比例縮?。?br/><style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
<div class="content-width">
<p><img src="/down/js/images/12567247980.jpg"/></p>
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>
- 3 回答
- 0 關注
- 445 瀏覽
添加回答
舉報
0/150
提交
取消