关于如何利用CSS自动调整图片的大小

我现在在做一个div的拖拽,当我把一张图片从一个比较大的DIV中拖到一个较小的DIV中时,怎样才能使图片自动变小,以适应那个小的DIV的?还是我只能通过JS代码来实现呢?... 我现在在做一个div的拖拽,当我把一张图片从一个比较大的DIV中拖到一个较小的DIV中时,怎样才能使图片自动变小,以适应那个小的DIV的?
还是我只能通过JS代码来实现呢?
还是我的做一张小的图片呢?
展开
 我来答
很多游戏
高粉答主

2019-11-26 · 游戏精通者,攻略技能点满
很多游戏
采纳数:91 获赞数:386970

向TA提问 私信TA
展开全部

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},这样就完成了。

野外负伤
推荐于2017-09-08 · 知道合伙人互联网行家
野外负伤
知道合伙人互联网行家
采纳数:13 获赞数:134
2011年到2015年从事医院网络4年,有丰富的实践经验,对网络营销有深刻的理解。

向TA提问 私信TA
展开全部
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;}

这种是直接控制图片的 宽和高 

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
也许没资格1314
2015-11-25 · TA获得超过212个赞
知道答主
回答量:135
采纳率:0%
帮助的人:57.8万
展开全部
<style>
.demon{width:100%;max-width:500px;height:auto;}
.demon img{width:100%;}
</style>

<div class="demon"><img src="demon.jpg"/></div>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
RocoLey
2009-12-20
知道答主
回答量:40
采纳率:0%
帮助的人:0
展开全部
不用再CSS里调吧
HTML里直接都可以了
如下
<img width="***" height="***" src="***.gif" alt="****" />

也可以直接 做个小的图片在放到网页里

希望有帮助..
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
Achille_sfly
2015-11-13 · TA获得超过181个赞
知道答主
回答量:128
采纳率:100%
帮助的人:65.1万
展开全部
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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(7)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式