❶ DIV+CSS宽度100% 怎么设置图片不变形，高度自适应
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
❷ 如何用CSS使图片自适应显示宽度
公司的项目中需要显示由用户提供URI链接的图片，可是预先无法获知图片的尺寸大小，如果图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩略图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。 如果用width 属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE 7 都提供了 max-width 属性支持。假定希望图片显示宽度不超过500像素，CSS可能如下： 以下是引用片段： 以下是引用片段： fit-image{ border:0; max-width:500px;}IE6 不支持 max-width 属性，但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。 以下是引用片段： 以下是引用片段： fit-image{ border:0; max-width:500px; width:expression( function(img){ img.onload=function(){ this.style.width=’’; this.style.width=(this.width500)?"500px":this.width+"px"};return’120px’//加载时显示宽度为120px }(this));}利用<img的onload 事件使图片加载完成后计算其尺寸大小，如果超过500像素就显示为500像素，否则显示其默认宽度。 expression 不是符合WEB标准的做法，不到万不得以不建议使用。但是不能不承认IE的很多扩展是不错的，IE不应该被轻视!
❸ css中图片如何自适应高度
1. 在编写网页时,如果图片大小事先是未知的,如果图片过大的话,会影响的网页中其他块的结构
使用css可以将图片的大小调整到一个固定的值
<span style="font-size: 16px;">#mian img{
max-width:170px;
width:170px;
width:expression(document.body.clientWidth>170?"170px":"auto");
max-height:180px;
height:180px;
height:expression(document.body.clientWidth>180?"180px":"auto");
overflow:hidden;
}
</span>
2.html代码中
如果图片的大小是事先未知的,这样设置可以使,图像的大小固定,从而不影响网页中其他块的结构
<span style="font-size: 16px;"><div id = "maim">
<!--
在mian样式的块中img标签图片的大小会被固定在170px*180px
-->
<img src="01.jpg">
</div>
</span>
❹ 怎样用css控制图片自适应大小
1、首先用dw编辑器建立了一个静态页面
❺ DIV+CSS，如何让图片自适应大小
这个才是你真正需要的答案。
<script>
var MaxHeight=100; //图片最大高度
var MaxWidth=100; //图片最大宽度
</script>
<img border="0" src="图片地址" onload="javascript:if(this.height>MaxHeight)this.height=MaxHeight;if(this.width>MaxWidth)this.width=MaxWidth;">
❻ 如何让div自动适应自身的img高度
1、首先在编辑器建立了一个静态页面，在body中添加两个div，设置宽度，并设class 为div1和div2，在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式：
❼ css怎么设置高度固定 宽度自适应
width:100%;
height:100px;
overflow:
hidden;
这样宽度就会自适应了，高度不变，超出的内容就会隐藏了
❽ CSS3如何固定图片宽度使图片高度按图片比例自适应
使用img标签，给它的width属性设定一个绝对数量值，其高度就会自动按照width的值进行缩放了。
如：
<img alt="" src="imgs/图片.jpg" width="1000" />
❾ css如何使图片自动适应div的宽度变化大小不要代码
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>
❿ css 怎么让图片自适应宽度
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= ImgD.width/ImgD.height){
if(image.width>ImgD.width){
ImgD.width=ImgD.width;
ImgD.height=(image.height*ImgD.width)/image.width;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>ImgD.height){
ImgD.height=ImgD.height;
ImgD.width=(image.width*ImgD.height)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>然后调用onload="javascript:DrawImage(this);"