Responsive Image with CSS for smaller screens

Question

I have two horrizontal tab images. I am moving my web application to display it in mobile.So I used responsive web design. I want the two horrizntal images to display inline. But when the screen width decreases, the second image is moving down. The image shrinks after moving down. I want the images shrink before moving down and it should not move down.CSS and HTML is given below.Please help.

.image-wrapper {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

<figure>
    <img class="image-wrapper" src="~/Images/Q.gif" />
    <img class="image-wrapper" src="~/Images/H.gif" />
    </figure>

Vikram Deshmukh · Accepted Answer · 2013-12-06 08:42:57Z

1

You can achieve that using Media query. Try something like this:

@media (max-width : 320px) {

  .image-wrapper {
    width: 100%;
    height: auto;
    display: block;
  }
}
@media (min-width : 320px) {
  .image-wrapper {
    width: 50%;
    height: auto;
    display: inline-block;
  }
}

As seen from the code, the tipping point beyond which the images will flow one below the other is when the available width is less than 480px.

edited Dec 6, 2013 at 8:42

answered Dec 6, 2013 at 7:32

Vikram Deshmukh

16.1k4 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2707092 Over a year ago

I am using media queries only. The images is getting shrinked when i resize the window, that means,the css is working. But still I am not getting the result.

user2707092 Over a year ago

Till width of 480 it works already. I want it for a much smaller screen size around 320 for apple phones

Vikram Deshmukh Over a year ago

@user2707092 so you wish to change into a single column layout when the width is 320px or less? Then just change the 480px in the sample code I posted to 320px. See my edited post.

user2707092 Over a year ago

I tired that already.But no luck. If I use only one image,it works fine.It shrinks,but for 2 images it goes down

Vikram Deshmukh Over a year ago

I don't get it. Just fiddled it for you. Try re-sizing the Result container and notice the layout changing when the width falls below 320px. Just added float:left for the images to float side-by-side. You can also try reducing the width from 50% to 49.5%.

|

roo2 · Accepted Answer · 2013-12-06 07:20:52Z

0

try using media queries, they will only apply to smaller screens

 @media only screen and (max-width : 760px) {
     img{
        width: 100%;
     }
 }

answered Dec 6, 2013 at 7:20

roo2

6,0712 gold badges34 silver badges45 bronze badges

Collectives™ on Stack Overflow

Responsive Image with CSS for smaller screens

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related