iT邦幫忙

0

css 隨手機螢幕調整圖檔位置

css

想請教我的手機是 apple s6(1334 x 750 像素),想把雲朵圖遮在課表下方,這張圖是OK的
我用我朋友的手機asus跟三星 i7 雲朵圖都可以遮住下方
https://ithelp.ithome.com.tw/upload/images/20180517/20097057zKe6KVvxCN.jpg
但用了htc 10 (2560 x 1440 像素),雲朵圖不能剛好遮在最下面底線縣,如下圖:
https://ithelp.ithome.com.tw/upload/images/20180517/20097057QwvJ3ZvSq4.jpg
我用css寫了語法,2560px以上margin是95%,1000px以下是90%
但這只會htc雲朵圖的位置還是會一樣遮不住..
想請教甚麼問題跟解決方法 謝謝

@media screen and (max-width: 2560px) {
#footer{
width:910px;
height:160px;
background:url(image/cloudwind.png) ;
position:absolute;
margin:95% 4% 0%;
z-index:20;
background-size:100%;
background-repeat:no-repeat;
background-position:bottom center;
}
  }

@media screen and (max-width: 1000px) {
 #footer{
width:910px;
height:145px;
background:url(image/cloudwind.png) ;	
position:absolute;
margin:90% 3% 0%;
z-index:20;
background-size:100%;
background-repeat:no-repeat;
background-position:bottom center;

}
  }
下了 position:absolute; 怎麼不下 BOTTOM:0PX; 呢
下了這個,哪張圖就是永遠置底了
然後上一層要有position:relative; 喔
浩瀚星空 iT邦研究生 5 級 ‧ 2018-05-17 09:55:27 檢舉
問題在於 margin:90% 3% 0%;
不要想要完全用margin%來做定位。
遇上不是預想狀態的情況。會不好處理的。
基本上就如上面說的。都已經使用了position:absolute;
為何不好好的去利用它來幫你處理呢??
如果說因為無法相對定位的話。
就如窮嘶發發發大說的。你的上一層容器,要給他position屬性。
這樣其下的position:absolute;就會依據他的位置做定位處理了。
mayyola iT邦新手 3 級 ‧ 2018-05-17 10:05:58 檢舉
謝謝兩位,但想請教兩種手機尺寸不同,我用兩種max-width來規範,好像只有一種max-width可以規範圖的位置? 謝謝
0
最佳解答

作法很多,簡單示範一種:

css

table,
table tr td
{
	border:1px black solid;
}
.out-div{
	position:relative;
}
.in-div
{
	position:absolute;
	bottom:0px;		
	border:1px red solid;
	width:200px;
	height:80px;
}
.in-div img
{
	width:200px;
	height:80px;
}

html

<div class="out-div">
	<table>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
			<tr><td>表格內容</td><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr>
	</table>
	<div class="in-div">
		<img src="http://5.blog.xuite.net/5/d/8/5/23913647/blog_2032438/txt/33441302/0.jpg" />
	<div>
<div>
mayyola iT邦新手 3 級 ‧ 2018-05-17 22:39:41 檢舉

謝謝~

0
純真的人
iT邦高手 4 級 ‧ 2018-05-17 02:14:10

你沒有使用以下屬性@@...
背景依區塊佔滿寬度
background-size:100%;
背景靠下置中
background-position:bottom center
背景不重複顯示
background-repeat:no-repeat

mayyola iT邦新手 3 級 ‧ 2018-05-17 22:39:23 檢舉

謝謝:)

0
greenmac
iT邦新手 5 級 ‧ 2018-05-17 11:44:19

1

我要發表回答

立即登入回答