❶ 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);"