关于如何利用CSS自动调整图片的大小
我现在在做一个div的拖拽，当我把一张图片从一个比较大的DIV中拖到一个较小的DIV中时，怎样才能使图片自动变小，以适应那个小的DIV的？还是我只能通过JS代码来实现呢？...
我现在在做一个div的拖拽，当我把一张图片从一个比较大的DIV中拖到一个较小的DIV中时，怎样才能使图片自动变小，以适应那个小的DIV的？
还是我只能通过JS代码来实现呢？
还是我的做一张小的图片呢？ 展开
还是我只能通过JS代码来实现呢？
还是我的做一张小的图片呢？ 展开
9个回答
展开全部
1、首先需要新建一个HTML页面。
2、然后输入页面的标题，可以按照下方图中的进行设置。
3、然后在根据下方图片中的代码进行编辑，
4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。
5、在两个div中加入相同的图片<img src="images/5.png" />，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。
6、然后在输入命令.img img{ width:100%; height:auto}，这样就完成了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img {max-width: 800px; height: auto;}代码中的max-width:800px限制图片的最大宽度为800像素，而下面的hight:auto很关键，可以保证图片有正确的长宽比，不至于因为被调整宽度而变形。
img {width:100%;height: auto;}这种css是图片自适应，不管img的父元素宽度高度如何调整，img都会等比填充，知道宽度和父元素一样。
img { width:100px; height:100px;}这种是直接控制图片的 宽和高
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.demon{width:100%;max-width:500px;height:auto;}
.demon img{width:100%;}
</style>
<div class="demon"><img src="demon.jpg"/></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不用再CSS里调吧
HTML里直接都可以了
如下
<img width="***" height="***" src="***.gif" alt="****" />
也可以直接 做个小的图片在放到网页里
希望有帮助..
HTML里直接都可以了
如下
<img width="***" height="***" src="***.gif" alt="****" />
也可以直接 做个小的图片在放到网页里
希望有帮助..
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（7）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
