How to increase width of image when dimensions are not known in CSS?

Question

I have an image tag like

<img />

I then dynamically download a link to an image, and I set the image src to that link. I do not know the dimensions of the image in the link. Is there a CSS code I can use to make sure the width of the image is exactly 200px (no crop, just stretch to fit) and the height of the image is the same as on the original image? (so basically just a horizontal scale when original dimensions are not known). Whatever I try, it seems to preserve the aspect ratio.

Thanks

Here's an example: I am dynamically loading this image:

I don't know its dimensions, But in the end, I want it to look like (pretend its width is 200px).

No, it should stretch to fit. Have it stretch to fit horizontally, and keep vertical height same as on original image. — omega, Jan 28 '16 at 15:09
you mean for smaller images <200px it is preserving aspect ratio? — pratikpawar, Jan 28 '16 at 15:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101907/discussion-between-pratikwebdev-and-omega). — pratikpawar, Jan 28 '16 at 15:14
No, for any image. It should make the width 200px (either stretching stretching or compressing depending if original size is less or more than 200px). — omega, Jan 28 '16 at 15:14
Possible duplicate of [How do you stretch an image to fill a
while keeping the image's aspect-ratio?](http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat) — AGE, Jan 28 '16 at 15:14
That is to preserve aspect ratio. In my case I do **not** want it to preserve aspect ratio. — omega, Jan 28 '16 at 15:18

score 2 · Accepted Answer · answered Jan 28 '16 at 15:54

2

This is what you are looking for.

function formatImage(t)
{
    //var t = document.getElementById("idOfImg");
    alert(t.naturalWidth + " " + t.naturalHeight);
    t.height = t.naturalHeight;
    t.width = "200";

}

On every image that you want this behavior add onload=formatImage(this);

JSFiddle https://jsfiddle.net/94rzcLh6/

Lmk if it works. I have not used proper naming on fiddle kindly ignore that.

answered Jan 28 '16 at 15:54

pratikpawar

2,038
2
16
20

1

the question is without .js – miglio Jan 28 '16 at 15:57
ah my bad. if OP feels like referring it :) but your solution works well too. Since OP mentioned earlier it will be for number of images in that case it might be useful and simple to keep existing html code with minimal changes. – pratikpawar Jan 28 '16 at 16:10
@pratikwebdev I agree with your answer, but I wonder why the OP did only specify CSS to begin with – AGE Jan 28 '16 at 16:37
@AGE Agreed! May be OP did not use JS in existing code hence it might have not crossed OPs mind. I just suggested this solution on broader basis considering multiple elements and related work efforts for coding. – pratikpawar Jan 28 '16 at 18:34

miglio · Answer 2 · 2016-01-28T16:33:48.047

1

how about this:

css:

.content{
  display:table;
}

.thumb{
  width:200px;
  height:100%;
  display:table-cell;
  vertical-align:top;
}

.thumb .in, .thumb .in img{
  width:100%;
  height:100%;
}

html:

<div class="content">
  <div class="thumb">
    <div class="in">
      <img src="http://www.planwallpaper.com/static/cache/7b/30/7b306aff620b08d0eefdb6b37f57abc8.jpg" />
    </div>
  </div>
  <div class="thumb">
    <div class="in">
      <img src="http://www.planwallpaper.com/static/cache/a6/4f/a64ffdfc06a8bea4ed2e62f2a44b063d.jpg" />
    </div>
  </div>
  <div class="thumb">
    <div class="in">
      <img src="http://www.gettyimages.es/gi-resources/images/RoyaltyFree/113198687.jpg" />
    </div>
  </div>
</div>

jsfiddle

In the jsfidle sample I check the height and this preserve it.Taking from 2 browsers.The same is for other images.

edited Jan 28 '16 at 16:33

answered Jan 28 '16 at 15:27

miglio

2,048
10
23

This seems to preserve aspect ratio, which is not what I want. I want the height to remain the same as original image height. – omega Jan 28 '16 at 15:33
you want the height is the same for all images? – miglio Jan 28 '16 at 15:37
I put an example image in my original post. – omega Jan 28 '16 at 15:40
Yes, same as original image height. – omega Jan 28 '16 at 15:40
@omega check again. is thus? – miglio Jan 28 '16 at 15:50
the jsfiddle still seems to preserve aspect ratio, and doesn't look like my example above. – omega Jan 28 '16 at 15:58
I set the image to 200px with the original height. @omega what's wrong? – miglio Jan 28 '16 at 16:02
I don't understand, are you saying the current fiddle code you have is currently working? Because when I check, it looks like its not working. I.e. the aspect ratio is preserved when it should not be. – omega Jan 28 '16 at 16:05
I still see same results in fiddle? I am confused now. – omega Jan 28 '16 at 16:23
In chrome it does the trick. But in Firefox the image is scaled down – Type-Style Jan 29 '16 at 11:37

AGE · Answer 3 · 2016-01-28T16:02:23.297

0

You need to wrap your image in a container that can help you preserve the 200px constrain you want to apply on your image. The height will adapt to the width which is neat since you won`t have to worry about it.

The below example shows what you can do with a custom size image, from placeholdit, you can modify it as you like. I also advise you to play around with the .wrapper width in order to identify any changes you wish to apply such as adding width: 200px; width: auto; instead... this .wrapper is a very flexible container and that is what you need, you can change it however you like.

EDIT

Going by the comments below, I decided to modify the wrapper of the image to force the image to lose it's aspect ratio. First, I am using a position: absolute (you can also use position: fixed). I also made the image dimensions completely disproportionate to the .wrapper dimensions, to further elaborate on the necessity of losing aspect ratio.

Note: Since it is only a demonstration, I am not worrying about multiple images and how to position them properly (that is another question entirely).

.wrapper {
  width: 200px; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0;
}

.wrapper img {
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <img src="http://placehold.it/1500x1000" alt="some image">
</div>

Feel free to play around with the .wrapper to

edited Jan 28 '16 at 16:02

answered Jan 28 '16 at 15:23

AGE

3,752
3
38
60

1

I'm not sure this is working. Can you change the placeholder image to 400 width and 200 height, and see if it works? – omega Jan 28 '16 at 15:33
It seems to also preserve aspect ratio – omega Jan 28 '16 at 15:36
I put an example image in my original post. – omega Jan 28 '16 at 15:40
@omega sorry for the delay, in the middle of work right now. Working on editing my post right now – AGE Jan 28 '16 at 15:51
@omega I have modified my answer, let me know if it helps. – AGE Jan 28 '16 at 16:02
In the snippet, the height of the image looks like 200px, but it should be 1000px..... This suggests its preserving aspect ratio when it should not be. – omega Jan 28 '16 at 16:07
@omega that is because the height is set to 100px, you can change that to whatever you like within the wrapper class – AGE Jan 28 '16 at 16:14
The thing is the height should be dynamic, it needs to be what the original image height is. So I can't hardcode the exact height in the css. – omega Jan 28 '16 at 16:21
@omega Height 100% is dynamic l, have you tried using your own images to identify whether or not this is true for you? – AGE Jan 28 '16 at 16:25
@miglio I haven't actually taken a look at it, give me a couple of minutes – AGE Jan 28 '16 at 16:48
@miglio honestly the OP is stating that the JSFiddles are preserving aspect ratio when they clearly are not, therefore the OP is in need of something that they are not clearly specifying. I suppose it would have been **much** easier to do a JavaScript implementation, however the tags in the question did not specify this either, yet the OP accepted a JavaScript solution. Go figure – AGE Jan 28 '16 at 16:55

How to increase width of image when dimensions are not known in CSS?

3 Answers3