强制图像在宽度变化时保持原生高度

Question

https://jsfiddle.net/q97jn9jp/

我有一些图像,但我不知道这是width或height.我希望它很100%宽,但我希望它的高度保持自然(如果图像高度是100px我希望它总是留下来100px).

那可能吗？

我不想使用javascript.

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

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

Answer 1

我意识到这里的目标是不必使用特定于图像的样式.但是,如果此限制仅适用于维度,则可能有效:

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

小提琴