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

css

mayyola 2018-05-17 00:34:18 ‧ 3736 瀏覽

想請教我的手機是 apple s6(1334 x 750 像素)，想把雲朵圖遮在課表下方，這張圖是OK的
我用我朋友的手機asus跟三星 i7 雲朵圖都可以遮住下方

但用了htc 10 (2560 x 1440 像素)，雲朵圖不能剛好遮在最下面底線縣，如下圖:

我用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;

}
  }

窮嘶發發發 iT邦高手 1 級 ‧ 2018-05-17 09:25:36 檢舉

下了 position:absolute; 怎麼不下 BOTTOM:0PX; 呢
下了這個，哪張圖就是永遠置底了
然後上一層要有position:relative; 喔

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2018-05-17 09:55:27 檢舉

問題在於 margin:90% 3% 0%;
不要想要完全用margin%來做定位。
遇上不是預想狀態的情況。會不好處理的。
基本上就如上面說的。都已經使用了position:absolute;
為何不好好的去利用它來幫你處理呢??
如果說因為無法相對定位的話。
就如窮嘶發發發大說的。你的上一層容器，要給他position屬性。
這樣其下的position:absolute;就會依據他的位置做定位處理了。

mayyola iT邦研究生 2 級 ‧ 2018-05-17 10:05:58 檢舉

謝謝兩位，但想請教兩種手機尺寸不同，我用兩種max-width來規範，好像只有一種max-width可以規範圖的位置? 謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-05-17 11:49:26

最佳解答

作法很多，簡單示範一種：

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>