㈠ html5 怎麼讓圖片自適應

html5中是通過css3的background-size來控制自適應的。

  • 直接在圖片代碼裡面設置style，例如<img src="xxx.jpg" style="max-width:100%;"/>2、要麼給圖片統一一個內class名例如response-img，然容後在css文件裡面設置這個class

㈡ html5設置圖片自適應屏幕寬度

使用百分比，比如
<
img
src='../a.ipg'
style='width:50%'
/>
這樣就會保持屏幕的50%的寬度。
如果有上級標簽，比如：
<div>
<
img
src='../a.ipg'
style='width:50%'
/>
</div>
那圖片大小就是div寬度的50%，div沒有設置寬度就會默認是屏幕寬度，如果設置了寬度，就要注意

㈢ html代碼 插入圖片 手機上自動適配大小 這個應該怎麼寫

在網頁的<head>中增加以上這句話，可以讓網頁的寬度自動適應手機屏幕的寬度: [html] view plain <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5,

㈣ css圖片自適應手機屏幕

display: block;
height: auto;
max-width: 100%;
加上這些屬性，然後img隨著父級寬改變

㈤ html5手機頁面背景圖片自適應大小問題

1，輸入position：fixed；top：0；left：0；將整個div固定在屏幕的頂部和左側。

㈥ html5 怎麼讓圖片自適應

【效果】

圖片自動伸縮，不會超過屏幕寬度


【原理】

css控制圖片回的max-width


【代答碼】

  1. 要麼直接在圖片代碼裡面設置style，例如<img src="xxx.jpg" style="max-width:100%;"/>

  2. 要麼給圖片統一一個class名例如response-img，然後在css文件裡面設置這個class，例如

.response-img{
max-width:100%;
}

㈦ HTML 圖片在手機端自適應

<!DOCTYPEhtml>
<html>

	<head>
		<metacharset="utf-8">
	</head>
	<styletype="text/css">
		*{
			margin:0;
			padding:0;
		}
		.demo{
			width:100%;
			height:100%;
			max-width:760px;
		}
		.demoimg{
			width:100%;
			height:62.5%;
		}
	</style>

	<body>
		<divclass="demo">
			<imgsrc="http://pic1.win4000.com/wallpaper/6/578855acae491.jpg"/>
		</div>

	</body>
</html>

㈧ 怎麼讓圖片在手機端自適應大小

首先看一下圖片自適應的網頁。（本圖中的圖片大小剛好占滿瀏覽器）

首先，我們在body中增加canvas標簽：
<canvas id="myCanvas">
Your browser does not support the canvas element.
</canvas>
<div> 本養老院佔地面積是14000平方米，建築面積5000平方米。園林面積為7000平方米。</div>
註：這里極力推薦使用html5的canvas標簽，使用傳統的img標簽經試驗有一系列問題，小編暫時沒找到可自適應的簡便方法。

此時刷新頁面查看效果，發現注釋已經顯示出來，且頁面上面的花瓣canvas已經預留出空間，如圖：

為canvas標簽增加自定義背景：
#myCanvas {
background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
background-size: 100%;
}
註：url中是圖片的路徑，大家需自行修改。

這時候查看頁面效果，發現圖片已經展示，但是未占滿整個瀏覽器。

使用css定義body、canvas標簽樣式：
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myCanvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: block;
}

這時候刷新頁面，發現圖片已經自適應了。目的達成。

㈨ html 5 和css3 怎麼讓圖片中的菜單自適應所有的電腦屏幕以及手機

給你個思路：百分比
滿意請點贊

㈩ html中如何使圖片自動適應瀏覽器

可以使用html的style標簽的width屬性實現這種圖片自動適應效果。

具體步驟如下：

需要准備的材料分別是：電腦、瀏覽器、ultraedit。

1、在ue編輯器中新建一個空白的html文件。