CODEWITHSUNDEEP
csshtmlimageresize
Mihai Bujanca
Mihai Bujanca

Reputation: 4219

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

Answers (4)

Abhay Anand
Abhay Anand

Reputation: 602

You can make your images responsive by using CSS to ensure they scale properly on different screen sizes. Here’s a simple approach:

  1. Use CSS for Responsive Images

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

    This ensures that the image resizes dynamically based on the screen size while maintaining its aspect ratio.

  2. Use srcset for Different Resolutions
    If you have multiple versions of an image, you can use the srcset attribute:

    <img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w" 
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1920px" 
     alt="Responsive Image">

    This helps browsers load the appropriate image based on the user’s screen size.

  3. Optimize Image Size
    Large images can slow down your page. You can use EasyToolsKit to resize and optimize your images efficiently without losing quality. It supports various formats and keeps your images web-friendly.

Upvotes: 0

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

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