切換到橫向時更改圖像的順序

-1

當前正在爲我的客戶在移動網站上工作，但無法獲得以下工作。這個移動網站的主頁分成兩個大的圖像，供用戶選擇。使用以下代碼將主頁上的圖像堆疊在一起可以完美呈現肖像模式。切換到橫向時更改圖像的順序

<p><a href="/female"><img alt="" src="image1.jpg" style="width: 100%; height: 51%; position: absolute; margin-top:0; left:0; right:0;" /></a> 
<a href="/male"><img alt="" src="image2.jpg" style="width: 100%; height: 49%; position: absolute; bottom:0; left:0; right:0;" /></a></p>

這工作完全正常的所有設備，同時在縱向模式，但問題是，一旦這些設備在縱向模式時，圖像被拉伸太多。這當然是因爲100％的寬度。

在理想情況下;當切換到風景時，兩幅完全不同的圖像並不在彼此的頂部。

示例;

 ___     ________ 
    | 1 |    | 1 2 | 
    |_2_|    |________| 
Portrait mode   Landscape mode

希望我的繪畫有任何意義。

來源

2014-04-14 Mar1

我只是簡單地使用javascript來實現這一點，你可以使用onorientationchange事件，這是每個移動瀏覽器/設備或resize事件不支持的事件。

來源

2014-04-14 13:15:39 Kevkong

可以使用@media規則查詢關於該酒店orientation，應用該規則，只有當orientation是portrait（默認是橫向）：

img { 
    width: 100%; 
    height:100%; 
    box-sizing:border-box; 
    border:1px solid green; 
} 
a { 
    display:inline-block;  
    width:50%;   
} 
@media only screen and (orientation:portrait) { 
    a { 
    display:block;   
    width:100%; 
    } 
}

這裏是working fiddle. 要測試小提琴，你必須嘗試調整顯示窗口的大小，使其從風景變爲人像，反之亦然。

來源

2014-04-14 13:20:02

問題在於，在景觀中，圖像需要100％寬度和50％高度。在風景中，圖像需要寬度爲50％，高度爲100％。 – Mar1

@ Mar1當我們應用相對寬度/高度（按百分比）時，我們應該知道父母的特定大小，我選擇視圖大小作爲父級大小並在此更新小提琴http://jsfiddle.net/viphalongpro/MSkw9/2 /希望這就是你想要的。 –

謝謝，這開始看起來完全像我需要的。我正在嘗試在我的網上商店的一個模塊中完成所有這些工作，所以圖像的CSS實際上已經搞亂了我的stylesheet.css文件。 – Mar1

切換到橫向時更改圖像的順序

回答

相關問題