大圖片根據解析度自適應寬度,解析度自適應寬度
問題:一個1920*900的大圖,在1024*768的解析度只能顯示一部分,希望仍置中顯示
解決方案CSS:
width: 100%;
background-position: 50% 50%;
樣本code:
<style> body { background-repeat: no-repeat; width: 100%; background-position-x: 50%; background-position-y: 118px; background-image:url(@Url.Image("/XXX/XX.jpg")); } .book { margin: 0 auto; width: 960px; height: 700px; position: relative; }</style><div class="book"></div>
android 圖片大小怎設定可以自適應不同解析度
不知道你什麼情況下要讓圖片自適應不通過解析度。給你舉個例子吧,希望對你有所協助!當你把圖片塞到imageView中時,布局注意
不要把值定死 比如:
android:layout_width="100dp"
android:layout_height="90dp"
直接給他
android:layout_width="fill_parent"
android:layout_height="wrap_content"
這樣 ,才能適應你解析度。
還有就是drawable_hdpi ,ldpi,mdpi分別代表不同解析度drawable_hdpi(800*480),ldpi(480*320),mdpi(320*240),你自己放圖片時注意了。
html頁面怎可以夠自適應電腦螢幕寬度?
在1024*768或者800*600的解析度下可以自動調整成適用於該用戶端解析度的大小。
第一種方法:做一個網頁解決問題(長了點)
如果只是因為瀏覽者改變了瀏覽器的設定,或者因為瀏覽器不相容,使自己精心製作的網頁變得"面目全非",那多令人沮喪!下面我們以網頁愛好者的常用工具Dreamweaver(以下簡稱DW)為例,列出幾個網頁製作初學者較常見的網頁布局問題以及解決方案,希望對初學者們有所協助。
一、消除任意縮放瀏覽器視窗對網頁的影響
一番辛苦做出來的網頁,在全屏狀態下瀏覽一切正常。但在改變瀏覽視窗大小之後,網頁就變得"不堪入目"了,這是個很值得注意的問題。
問題的根源還得從網頁的布局說起,在DW中,網頁內容的定位一般是通過表格來實現的,解決表格的問題也就成功了大半。
大家應該注意到,在DW中表格屬性面板的高寬設定選擇上提供了兩種不同類型:百分比和像素值。百分比的使用將會產生前面說到的那個毛病。這裡所說的百分比是指表格的高或寬設定為上層標記所佔地區高或寬的百分比,如在一個表格單元的寬度是600,在它裡面嵌入了另外一個表格,表格寬度占表格單元的50%,則這個表格的寬度為300,依此類推,如果在一個表格不是嵌於另一個表格單元中,則其百分比是相對於當時視窗的寬度的。IE瀏覽器中,隨便改動首頁視窗的大小時,表格的內容也隨之錯位、變形,就是因為表格的百分比也要隨著視窗的大小而改變成相應的百分比寬度。
自然,解決這個問題的辦法就是將表格寬度設定成固定寬度(也就是像素值)。另外如果外層表格已做好固定寬度設定,內層表格也可以適當使用百分比設定。清楚這個原則以後,如果出現類似的問題大家也知道怎麼解決。
二、讓網頁置中
說到了視窗大小就會順著路子想到解析度的問題,在800×600解析度下製作的網頁在1024×768解析度的機器上開啟,整個網頁就會跑到左邊;1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧?做起來費時,看起來也費勁。怎麼辦呢?
現在大多數網民都還在用800*600的解析度,所以我們一般可以以此解析度為主,要想讓網頁在1024*768時置中,只要在網頁原代碼的<body>後緊加一句<center>,</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下,第一個就是上面說到的百分比的問題,表格、儲存格的寬度單位最好要使用像素單位,而不要用百分比。例如width=770。如果你的表格寬度設的是百分比,那麼使用大於800×600的像素時,網頁就會拉寬,這樣網頁可能會變形。在<body>中加入leftmargin=0,即<body leftmargin=0>這種情況下,800×600支援的表格寬度為780像素時不會出現捲軸。還有一點要注意的是不能用DW中的層來定位。
<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></......餘下全文>>