⑴ 網頁調整了style.css 以後,手機網站,圖片顯示超出了屏幕。怎麼改為適應屏幕大小
這位網友你好,想要網頁寬度自適應,你需要把網頁元素寬度設置為百分比,還要在網頁頭部加上代碼:
圖片自適應,且不超過原始大小,需要設置最大寬度,代碼如下:
img{
width:100%;
max-width:100%;}
⑵ css 如何把背景圖占滿整個屏幕
background: url(../images/login/theme4.jpg)centercenterno-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100%;background-size的屬性可以調整試試cover,100%等
⑶ css圖片自適應手機屏幕
1)按你的操作,讀取當前的寬度然後設置到樣式中:
var h = $(window).width();
$(".mymsg").css("width", h);
2)css操作:
設置一個div,設置div的寬度為100%,然後設置img的寬度為100%
⑷ 如何用CSS或者JS設置一張圖片,讓手機橫屏(寬480)看或者豎屏(寬320)看都是滿屏。
圖片寬度設成100%,理論上不是單色圖案、重復背景圖案、或js動態生成的畫布上的矢量圖,jpg之類的是沒辦法滿屏的,320的時候滿屏了,橫過來看480的時候,高度又少了,可視區外還有一截。
⑸ css怎樣讓背景充滿整個屏幕
HTML
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>
給body標簽指定背景圖,這樣背景圖就可以填充整個瀏覽器viewport了。
其實,該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的,那麼背景圖將自動伸縮,充滿整個容器。
CSS body標簽的樣式如下:
body {
/* 載入背景圖 */
background-image: url(images/background-photo.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時,背景圖像的位置相對於viewport固定 */
background-attachment: fixed;
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設置背景顏色,背景圖載入過程中會顯示背景色 */
background-color: #464646;
}
上面最重要的一條就是:
background-size: cover;
這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高(在上面的例子中,就是body標簽)。
這里需要注意的一點就是:如果背景圖小於body標簽的尺寸(例如在高解析度顯示器上,或頁面內容特別多時),瀏覽器會拉伸圖片。都知道,當把一個圖片拉伸時,圖片會變模糊。
因此,在選擇背景圖時,要特別注意尺寸。為了照顧到大尺寸屏幕,demo里用的圖片尺寸為5498px * 3615px 。
同時,為了讓背景圖始終相對於viewport居中,聲明了:
background-position: center center;
上面的規則會把背景圖縮放的原點定位到viewport的中心。
接下來需要解決的問題是:當內容的高度大於viewport的高度時,會出現滾動條。希望背景圖始終相對於viewport固定,即使用戶滾動時也是一樣。
解決辦法就是:
background-attachment: fixed;
⑹ css怎麼占滿手機屏幕
nav{font-size:16px;}
@media screen and (min-width:320px){/*屏幕寬度於等於320像素,nav字體改14種用刷新自判斷必須要寫原本式面*/
nav{font-size:14px;}
}
/*同理*/
@media screen and (max-width:320px){/*寬度於等於320,同理*/
}
⑺ css如何讓圖片全部顯示
操作如下
1、使用CSS設置圖片所在DIV的寬高為百分之百。
2、使用background–size:cover;樣式設置圖片全屏並隨屏幕縮放。
以下圖片僅供參考
⑻ css背景圖怎麼在手機自適應全屏
根據頁面設計情況選擇相應的參數,方法就是設計背景size參數
background-size:cover ,適用於上半部分背景圖片,下半部分純色
將背景圖像等比縮放到完全覆蓋容器,背景圖像有可能超出容器。
background-size:contain 適用於一屏幕,缺點屏幕寬度高度不一致,會有縫隙
將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等,背景圖像始終被包含在容器內。
background-size:100% 100%;
最簡單粗暴的方法,缺點會給背景拉伸變形
⑼ css 如何讓圖片全屏的問題
css設置背景圖片全屏,如果只是將其當做一張圖片顯示,可以通過css控制。超大圖片,引入進來即可根據大小縮放。
如果這張圖片為背景圖片由於背景圖片不具有伸縮性,只能通過別的方法繞著解決,在ie中可以用,實現背景拉伸鋪滿整個瀏覽器,但其它的瀏覽器不支持。
⑽ CSS中如何設拉伸背景圖片鋪滿屏幕
body{
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;或者background-size:100%;
}
(10)css圖片滿手機屏幕擴展閱讀:
CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。
編程工具
記事本:使用Windows系統自帶的記事本可以編輯網頁。只需要在保存文檔時,以.html為後綴名進行保存即可。
Dreamweaver:它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁編輯器,它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具,利用它可以輕而易舉地製作出充滿動感的網頁。