如何讓圖片適應div_怎麼讓圖片自適應DIV高寬不變形呢

㈠ css文件如何使背景圖片大小適應div的大小

對背景圖片設置屬性：background-size：cover;可以實現背景圖片適應div的大小。
background-size有3個屬性：
auto：當使用該屬性的時候，背景圖片將保持100%
的大小顯示，不進行任何縮放。超過div的多餘部分將被隱藏。當圖片過小時，圖片會自動平鋪。這種屬性通常用來做重復性的背景或者做半透明圖片背景。
cover：當使用該屬性時，圖片將被縮放至恰好能覆蓋div，並且圖片被隱藏的部分最少，這種屬性在大圖背景中應用比較廣泛。這點比較難理解，需要結合實踐理解。
contain：當使用該屬性時，圖片被縮放至最大且能被完全展示出來，但是由於圖片的的尺寸比例與div的尺寸比例會有不同，所以當圖片不能蓋住div時，圖片會自動平鋪。

㈡如何使div中的圖片自適應寬度和高度，圖片不變形，可以超出div，超出部分隱藏

1、HTML的div標簽主要是用來布局，div默認是沒有任何屬性的這也是常用它布局的原因。

㈢怎麼讓圖片自適應DIV高寬，不變形呢

可以這樣寫

$("img").each(function(){
		var$imgH=$(this).parent("div").outerHeight();
		var$imgW=$(this).parent("div").outerWidth();
		$(this).css({
			"width":$imgW,
			"height":$imgH
		})
	})

不過div大小如果超出圖片原來的解析度,圖片肯定會模糊的

㈣怎麼樣讓圖片適應div大小，但是還能在圖片上面加字。

樣式這樣寫：

.xxxDiv{
background:#000url("images/xxx.png")no-repeatscrollcentercenter;
background-size:100%100%;
}

HTML例子：

<divclass="xxxDiv">哈哈哈</div>

㈤讓圖片適應div大小

先給div定義overflow:hidden樣式，不是為了剪裁圖片，只是為了頁面載入的時候，圖片不會把div撐開，讓頁面布局被破壞，然後給所有需要自適應的圖片，定義一個相同的name屬性，然後在頁面onload事件，或者頁面最後調用一個腳本，獲取全部name屬性為你定義的圖片，然後循環遍歷這些圖片，和圖片的父對象，然後給圖片的width，height屬性進行值定義，就OK了

和父對象對比的時候，width和height分開對比，當width和父對象相同的時候，並且height小於等於父對象，只設置width就夠了，這樣進行的縮放，就是原比例縮放，不然會拉伸失真的，相反，當height和父對象相同的時候，並且width小於等於父對象，只設置height就夠了

以上是客戶端處理方法，圖片如果太大太多的話，對伺服器壓力比較大，另一種方法就是在用戶上傳的時候，編寫圖片程序，進行判斷，手動把圖片縮小到指定大小，判斷方法類似上邊那一段，但是你設置width的時候，需要手動計算一下height，因為自己編寫的程序，是不會自動保持比例的

㈥ html 怎麼讓img自適應div大小

使html中div內的圖片隨屏幕大小調節的操作方法為，將div與img的寬度都設置為100%，代碼如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

<htmlxmlns="

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>圖片大小自適應</title>
<styletype="text/css">
div,img{width:100%;}
</style>
</head>
<body>
<div>
<imgsrc="20150930010349.jpg"/>
</div>
</body>
</html>

效果圖如下：

特別說明：

要圖片跟隨屏幕大小顯示，可以將圖片與div的寬度調整為100%，並且body不設置寬度（或者也設置為100%），在使用不同屏幕瀏覽網頁時，圖片將自動鋪滿屏幕。

有用記得採納

㈦ DIV+CSS，如何讓圖片自適應大小

放在CSS文件裡面代碼
.Size{
width:150px;
height:150px;
}
圖片調用css代碼<img
src="圖片路徑"
class="Size"
alt="當圖片不能正常顯示是，替換它的文字"/>
所有隻要都調用class="Size"就可以實現全部圖片都是150px的尺寸

㈧ div的class是圖片，怎麼使圖片的寬度自適應div的寬度

<div style='width:400px;height:auto;text-align:center;float:none;margin-left:auto;margin-right:auto;'><img src="image.jpg" style="width:100%;height:auto;"></div>這樣子就行的

㈨ css手機版頁面製作時如何讓背景圖片適應div的高度和寬度

具體步驟如下：

1、輸入position:fixed; top: 0; left: 0;使整個div固定在屏幕的最上方和最左方。

㈩如何讓圖片自適應相鄰元素div 的高度變成圖片高度內字體垂直居中

方法一：
該方法是將外部容器的顯示模式設置成display:table，img標簽外部再嵌套一個span標簽，並設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標准瀏覽器下，IE6/IE7還得使用定位。
HTML代碼

1
2
3

<div id="box">
<span><img src="images/demo.jpg" alt="" /></span>
</div>

CSS代碼

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>


方法二：
方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。
CSS代碼

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*針對IE6/7的Hack*/
top:50%; /*針對IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對IE6/7的Hack*/
top:-50%;left:-50%; /*針對IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

該方法有個弊端，在標准瀏覽器下由於外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，並且在IE8下設置邊框也無效。

導航:首頁 > 圖片大全 > 如何讓圖片適應div

如何讓圖片適應div

與如何讓圖片適應div相關的資料