-1

Currently working on a mobile website for my client but can't get the following to work. The homepage of this mobile site gets divided with 2 large images where users make their choice. The portrait mode works perfectly by stacking the images on the homepage with the following code.

<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>

This works perfectly fine on all devices whilst in portrait mode, but the problem is that as soon as these devices are used in portrait mode, the images get stretched too much. This is of course because of the 100% width.

In an ideal situation; When switching to landscape two entirely different images aren't on top of one another are side by side.

Example;

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

Hope my drawing makes any sense.

Mar1
  • 1

2 Answers2

1

You can use the @media rule querying about the property orientation, the rule is applied only when the orientation is portrait (the default is for landscape):

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%;
  }
}

Here is the working fiddle. To test the fiddle, you have to try resizing the display window so that it changes from landscape to portrait or vice-versa.

King King
  • 61,710
  • 16
  • 105
  • 130
  • The problem with this is that in landscape the images need to be 100% width and 50% height. Whilst in landscape the images need to be 50% width and 100% height. – Mar1 Apr 14 '14 at 13:39
  • @Mar1 when we apply the relative width/height (by percentage), we should know about the certain size of the parent, I chose the view size as the parent size and updated the fiddle here http://jsfiddle.net/viphalongpro/MSkw9/2/ Hope that's what you want. – King King Apr 14 '14 at 13:53
  • Thanks, that's starting to look exactly like what i need. I am trying to do all this within a module for my webshop so the CSS for the images is actually messing up my stylesheet.css file. – Mar1 Apr 14 '14 at 14:16
0

I would simply use javascript to accomplish this, you could ether use the onorientationchange event, which is not supported by every mobile browser/device or the resize event.

Kevkong
  • 460
  • 3
  • 16