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).

Answer 1

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.

Answer 2

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.