Force image to maintain native height when width changes

Question

https://jsfiddle.net/q97jn9jp/

I've got some image, but I don't know it's width or height. I want it to be 100% wide, but I want it's height to stay natural (if image height was 100px I want it always to stay 100px).

Is that possible?

I don't want to use javascript.

img {
  width: 100%;
  //height: ???;
}

<img src="https://placehold.it/100x100" alt="">

Answer 1

I realize that the goal here is to not have to use image-specific styling. If this limitation only applies to dimensions, though, this might work:

.stretchy {
  background-image: url(https://placehold.it/100x100);
  background-size: 100% 100%;
}
.stretchy img {
  display: block; /* eliminates descender space inherent with inline elements */
  visibility: hidden;
}

<div class="stretchy">
  <img src="https://placehold.it/100x100" alt="">
</div>

Fiddle