CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
FlyingCat
FlyingCat

Reputation: 14290

How to create responsive images in my case?

I am trying to resize the images based on the user's device. It could be iPad or desktop. I am using bootstrap 3 and try to implement it.

I have something like the following.

<a href='#' id='btn1' ><img class='img-responsive' src='image1.png'/></a>
<a href='#' id='btn2' ><img class='img-responsive' src='image2.png'/></a>
<a href='#' id='btn3' ><img class='img-responsive' src='image3.png'/></a>
<a href='#' id='btn4' ><img class='img-responsive' src='image4.png'/></a>

I want the images show the actual size on desktop but small size on iPad. I also need to have these bottom stay on the edge of the screen (top right and down) and I use absolute position.

My css is 

#btn1{
    position: fixed;
    top: 35%;
    left: 0;
    z-index: 10;
}
#btn2{
    position: fixed;
    top: 0%;
    left: 60%;
    z-index: 10;
}
#btn3{
    position: fixed;
    top: 30%;
    right: 0;
    z-index: 10;
}
#btn4{
    position: fixed;
    bottom: 0;
    left: 70%;
    z-index: 10;
}

My problem is when I open my app on iPad, the images are too big. I am not sure how to fix this. Please help. Thanks a lot!

Upvotes: 0

Views: 76

Answers (5)

Getsomepeaches
Getsomepeaches

Reputation: 1051

You can remove the class if it isn't working. However that class in bootstrap is used to give you this functionality.

Step 1: Change your images to this

<a href='#' id='btn1' ><img height="auto" width="100%" src='image1.png'/></a>

Step 2: Check responsive to see its works

Step 3: Remove height & width from image tag 

 <a href='#' id='btn1' ><img src='image1.png'/></a>

Step 4: Add it to your css

img{
   width:100%;
   height:auto;

}

Step 5 - Hopefully it works

Hope this helps

Upvotes: 0

Aaron
Aaron

Reputation: 550

Do you have the viewport specified?

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Upvotes: 0

Arbel
Arbel

Reputation: 30999

Since you specifically want to target iPads, you can use media queries based on iPads' screen size. (This is for a non-retina display)

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  { 

    img.img-responsive {
    display: inline-block;
    max-width: 100%; /* <- Adjust accordingly based on your actual layout */
    }

}

You can apply the same concept for retina displays or any other display size.

Source for iPad display resolutions: http://www.apple.com/ipad/compare/

Upvotes: 0

digitai
digitai

Reputation: 1842

Use this in your css stylesheet in order to maximize the image size in each device:

 img { max-width: 100%;}

Upvotes: 0

JerryHuang.me
JerryHuang.me

Reputation: 1790

Add this to your CSS

img{
max-width: 100%;
height: auto;
display: block;
}

Upvotes: 1

Related Questions