is there a css property that will fit an image with same proportions without resize?

I am fitting images to specific sizes, that are relatively small, but is there a way in html or css that would let me keep the original image the same (larger) size and fit it into the space i want if its the same proportions? This way when i reference the image again somewhere else (but at a larger size) i dont need two copies of the same image.

Thanks

 

Did you try specifying the image width: 100%? I did something similar to this years ago. I had a blog and what would happen is that large images would overflow the post content area and break the design. I set a width or max-width equal to 100% and that constrained large images to fit only inside the post area. Smaller images were unaffected.

 

just use img width="whatever" and it should resize the height accordingly to the proportion, at least that was the case on various browsers several years ago, I don't know if they changed that behavior, I don't use this anymore I much prefer to have two copies (generated automatically) to save on loading time when looking at the thumbnails.

 

are you talking about sprit sheets ??? you can always make a huge sprit sheet something like 2000 x 2000 and add both images on it

 

There's a couple of ways:

Although this is a quick fix, I think in this day in age it's worth thinking about the actual size of your images. We're going mobile, mobile's cost data. Your website needs to be friendly for mobile devices otherwise you'll lose your audience or severely limit it.

A way to do this, which I'm currently adopting is to make a website upload form and upon upload resize your images so you have 2 (or more) versions. E.g. upload whatever.gif which is 500x200px which is fine for normal computers, but crop a version to a smaller aspect ratio so you end up with whatever.gif and whatevermobile.gif similar names so you don't forget.

 

Use this code you will get your original image if you download it some where else. But if you want to make image relatively proportional to your webpage then use javascript it will change your image size but original size remains same.