Html 宽度更改时强制图像保持本机高度

我有一些图像，但我不知道它是宽度还是高度。我希望它的宽度是

100%

，但我希望它的高度保持自然（如果图像高度是

100px

，我希望它始终保持

100px

）

可能吗

我不想使用javascript。

img{
宽度：100%；
//高度：？？？；
}

---

您需要一个响应图像类，该类可以根据视口的宽度自动调整图像的大小，并动态更改图像的高度

.image-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

---

关键是使图像成为块级元素，具有自动确定的高度，同时将宽度限制为可用列的100%。

如果要保持图像的比例，必须使用：

高度：自动编辑

使用纯CSS和传统图像是不可能的
CSS不提供任何将图像的自然高度或宽度声明为值的机制

如果不使用JavaScript或JavaScript，就不可能完成您要求的操作

最接近你所要求的是提前知道图像的高度


img{
宽度：100%；
高度：100px；
}




编辑：对不起，我误读了，当我开始看小提琴时，你不知道它的高度。我是根据那张照片拍摄的

首先，让我们解释一下%是如何工作的

当按%调整某个对象的大小时，它实际上会“填充”它的容器。通过将中间分隔符拖动到不同的大小，您可以在您提供的小提琴中看到它是如何工作的

在这把小提琴中：

您可以看到图像高度保持在100px，或者是您解释的自然高度。而宽度延伸以填充容器宽度

同样，若你们不包括一个高度，它会随着宽度的增加而增加，这就是你们在小提琴中所体验到的

希望这能有所帮助
 在没有javascript的情况下，无法保持其高度，将宽度设置为100%。
我意识到这里的目标是不必使用特定于图像的样式。但是，如果此限制仅适用于尺寸标注，则可能适用于：


.stretchy{
背景图片：url(https://placehold.it/100x100);
背景大小：100%100%；
}
.弹性img{
display:block；/*消除了内联元素固有的下行空间*/
可见性：隐藏；
}

您是否试图保持纵横比？或者你是故意扭曲它们的？你有没有办法在标记中明确设置高度？i、 e.
@zgood-不，我不想在allOP特别提到的忽略比例的情况下保留纵横比。他不知道图像的高度。它可以是任何东西。硬编码为100px不是一个选项。哦，我的错，我误读了。我是根据提供的图片来做的。OP想要100%的宽度，而不是限制。那太奇怪了。我希望这不是真的。这是人，但也许你可以通过
背景图像
css属性来添加这些图像。检查这个链接：一个非常聪明的解决方案，希望它能满足OP的要求。
img {
  width: 100%;
  height: 100px;
}