关于如何利用CSS自动调整图片的大小
我现在在做一个div的拖拽，当我把一张图片从一个比较大的DIV中拖到一个较小的DIV中时，怎样才能使图片自动变小，以适应那个小的DIV的？
还是我只能通过JS代码来实现呢？
还是我的做一张小的图片呢？
qq_笑_17浏览 427回答 3
3回答
-
慕虎7371278
js版和css版自动按比例调整图片大小方法，分别如下：<title>javascript图片大小处理函数</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的防止图片撑破页面的代码，图片会自动按比例缩小：<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> -
千万里不及你
不用再CSS里调吧HTML里直接都可以了如下<img width="***" height="***" src="***.gif" alt="****" />也可以直接 做个小的图片在放到网页里
随时随地看视频慕课网APP
相关分类
CSS3