css如何使图片自动适应div的宽度变化大小不要代码
5个回答
展开全部
1、CSS强制图片自适应大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img {width:expression(this.width>600?"580px":this.width+"px");}
</style>
</head>
<body>
图片宽度大于600像素都强制显示为580像素宽<br><br>
<div>
<img src="http://d.lanrentuku.com/lanren/wallpaper/wallpaper-0013.jpg" />
</div>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
2、图片自动按比例缩小代码（防止页面被图片撑破）
<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >
//缩放图片到合适大小
function ResizeImages()
{
var myimg,oldwidth,oldheight;
var maxwidth=550;
var maxheight=880
var imgs = document.getElementById('article').getElementsByTagName('img'); //如果你定义的id不是article，请修改此处
for(i=0;i<imgs.length;i++){
myimg = imgs[i];
if(myimg.width > myimg.height)
{
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.height = myimg.height * (maxwidth/oldwidth);
myimg.width = maxwidth;
}
}else{
if(myimg.height > maxheight)
{
oldheight = myimg.height;
myimg.width = myimg.width * (maxheight/oldheight);
myimg.height = maxheight;
}
}
}
}
//缩放图片到合适大小
ResizeImages();
</script>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img {width:expression(this.width>600?"580px":this.width+"px");}
</style>
</head>
<body>
图片宽度大于600像素都强制显示为580像素宽<br><br>
<div>
<img src="http://d.lanrentuku.com/lanren/wallpaper/wallpaper-0013.jpg" />
</div>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
2、图片自动按比例缩小代码（防止页面被图片撑破）
<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >
//缩放图片到合适大小
function ResizeImages()
{
var myimg,oldwidth,oldheight;
var maxwidth=550;
var maxheight=880
var imgs = document.getElementById('article').getElementsByTagName('img'); //如果你定义的id不是article，请修改此处
for(i=0;i<imgs.length;i++){
myimg = imgs[i];
if(myimg.width > myimg.height)
{
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.height = myimg.height * (maxwidth/oldwidth);
myimg.width = maxwidth;
}
}else{
if(myimg.height > maxheight)
{
oldheight = myimg.height;
myimg.width = myimg.width * (maxheight/oldheight);
myimg.height = maxheight;
}
}
}
}
//缩放图片到合适大小
ResizeImages();
</script>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
强制定义图片的宽度为DIV宽度（img{width:div的宽度;height:auto;}），高度自动，图片就会等比例缩放
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img{width：100%;height:100%;}不过这样的话图片会变形
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个好像要用js控制了吧貌似
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
图片的宽度设百分比
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
