㈠ 怎麼讓圖片適應手機屏幕
需要自行裁剪哦,或者壁紙功能裡面支持裁剪才可以適應手機屏幕的長寬比。
㈡ 織夢手機版標簽點擊會連接到電腦,請問如何修改讓他自適應手機版的!
你如果是寫的css樣式,就在css文件裡面找到屏幕寬的的數據下的元素樣式,都去掉,就是包含screen的,如果是用js跳轉的,那就把js部分給刪除,別刪錯了就行,還不會再
可以查找CSS文件裡面的這個@media screen and (max-width: 1199px) ,這個是代表最大1199px 寬度的屏幕,當然括弧裡面的數字也有多少到多少之間或小於多少最小多少的設置數值, 可以把這類代碼均剪切放到另外的文檔中保存,然後重新刷新網頁查看是否與PC端一樣。 最近總有用法反應說是在本站下載的織夢模板中,有部分模板說是手機端端的圖片不能自適應大小。這個問題應該不會出現在本站的手機模板中,最後發現這幾個用戶都是從其他渠道下載的模板,真是一把汗啊。但是織夢模板網還是幫他們解決了問題,這邊把方法分享出來。
手機端圖片變形原因:
由於織夢後台編輯器上傳圖片,會自動獲取圖片尺寸,產生代碼為:
<img alt="圖片" src="圖片路徑" style="width: 800px; height:500px">
我們可以看到圖片被限制了尺寸,那麼我們在小於這個尺寸視窗下瀏覽時,就會變形。
織夢手機端圖片自適應解決辦法:
找到PHP系統文件:include/ arc.archives.class.php,先備份下這個文件,然後查找代碼:
//設置全局環境變數
$this->Fields['typename'] = $this->TypeLink->TypeInfos['typename'];
@SetSysEnv($this->Fields['typeid'],$this->Fields['typename'],$this->Fields['id'],$this->Fields['title'],'archives');
在其下面添加:
//去掉img的width和height
$this->Fields['body'] = preg_replace("/style=\"width\:(.*)\"/","",$this->Fields['body']);
保存上傳替換文件,然後生成,再查看源代碼,我們會發現,自帶的圖片width和height屬性 被成功的去掉了。
上面的方法就是針對「織夢DedeCMS手機端文章內容頁圖片不能自適應的解決辦法!」,方法是完全可行的。
如果你的手機站圖片不能自適應,可以嘗試這種方法自行解決問題。
㈢ php如何處理已定義寬高的圖片達到手機端自適應
眾所周知,一張圖片如果在PC端和手機端自適應的話,只需要定義圖片的寬度為100%,即img{width:100%;},或者在手機端定義圖片的最大寬度max-width屬性,我推薦大家使用第一種。但是大家在編輯內容上傳圖片的時候,有的編輯器會自動給img標簽加上寬高屬性,如圖所示:
這樣的話就不會在手機端正常顯示,達不到我們想要的100%的效果,如果圖片少的話大家可以手動清除格式,但是如果圖片很多的情況下手動會浪費很多時間,那麼如何清除批量清除這些格式那?解決這種情況有很多種方法,現在給大家提供一種PHP服務端的解決方案。
㈣ 怎樣把圖片設置成適應手機屏幕的大小
用尺量下你的手機屏幕大小長寬,然後在Photoshop里新建個頁面大小設置同比例的手機屏幕長寬,然後打開你需要的圖片導入到這個新建的頁面,適當的在裡面放大縮小到你所需要的圖片效果,就ok了
㈤ css 移動端精靈圖怎麼自適應
兩個思路,一個是圖片設置百分百寬度,一個是不同的瀏覽器寬度使用不同的CSS,全站自適應使用的是後一個思路
㈥ 手機網頁中的圖片根據屏幕大小自適應 怎麼弄
根據你要做的產品圖或banner圖,外面的div要設置寬度、高度。裡面的圖片再設置 width:100% height:auto,
㈦ 怎麼讓圖片在手機端自適應大小
首先看一下圖片自適應的網頁。(本圖中的圖片大小剛好占滿瀏覽器)
首先,我們在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頁面如何自適應手機端,自動放大或者縮小
用CSS3 @media 查詢 也叫「媒體查詢」;
語法:
.aaa{width:1200px;} //正常樣式
//下面是解析度最小為300px,最大解析度為1024px的樣式
@media screen and (min-width: 300px) and (max-width:1024px) {
.aaa{width:375px;}
}
可以參考:菜鳥教程CSS3 @media 查詢
㈨ 手機網頁中的背景圖片怎麼自適應
background-size:100% 100%;這樣就可以了,只要元素自適應,背景自然會自適應,所以元素要改成百分比的形式。
㈩ html5手機頁面背景圖片自適應大小問題
1,輸入position:fixed;top:0;left:0;將整個div固定在屏幕的頂部和左側。