CODEWITHSUNDEEP
csshtmlimageresize
Mihai Bujanca
Mihai Bujanca

Reputation: 4209

Resizing images html/css

I have a couple of images in a facebook app. The problem is that the image is quite big and I need it to look well whether it is accessed from a computer or phone. Setting it to some fixed dimension would obviously make it look bad, considering the different screen dimensions.
So, how should I resize it so that it would look well on any screen?

Upvotes: 0

Views: 19501

Answers (3)

user1247294
user1247294

Reputation:

Use media queries. e.g:

 @media all and (min-width: 1001px) {
  img {
    width: 100%; /* insert prefered value */
    height: auto;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  img {
    width: 100%; /* insert preferred value */
    height: auto;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  img {
    width: 100%; /* insert preferred value */
    height: auto;
  }
}

Upvotes: 1

trajce
trajce

Reputation: 1490

Try this

 img
 {
    width:100%;/*adjust this value to your needs*/
    max-width: the size of the image;/* so it wont get bigger and pixelated*/
    height:auto;
 }

another option if possible, is to use media queries, so for different browser sizes, you can load different size of the image.

here is a fiddle to see if this is what you are trying to achieve

Upvotes: 0

Alex W
Alex W

Reputation: 38173

Set the width and height on the img tags to be percentages (of their container):

<img src="http://..." alt="" width="50%" height="30%" />

Adjust percentages to your needs.

Upvotes: 2

Related Questions