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

Question

https://jsfiddle.net/q97jn9jp/

我有一些图片，但是我不知道它们的宽度或高度。我想让它们的宽度为100%，但是我希望它们的高度保持自然状态（如果图像高度为100px，我希望它始终保持100px）。

这可能吗？

我不想使用JavaScript。

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

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

- Adam Pietrasiak

---

你是想保持宽高比吗？还是有意扭曲它们？ - zgood

你有没有在标记中显式设置高度的方法？例如：<img src="" height="100" /> - Jesse Kernaghan

@zgood - 不，我根本不想保持长宽比 - Adam Pietrasiak

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>

Fiddle

- isherwood

---

一个非常聪明的解决方案，希望它能够满足OP的要求。 - Jesse Kernaghan

Answer 2

编辑

无法使用纯CSS和传统图像实现

CSS没有提供任何机制来声明图像的自然高度或宽度作为一个值。

如果不使用JavaScript或更改您的标记并按@isherwood建议使用background-image,则无法实现您所要求的操作。

您能够达到的最接近您所要求的是事先知道图像的高度。

img {
  width: 100%;
  height: 100px;
}

<img src="https://placehold.it/900x100" /><br />
<img src="https://placehold.it/450x100" /><br />
<img src="https://placehold.it/100x100" />

但是您可以使用JavaScript（即使您不想这样做）在页面加载时动态设置高度。以下是使用jQuery的示例：

$(function () {
  $('img').each(function () {
    var $this  = $(this),
        height = $this.height();
    $this.css({
        width : "100%",
        height: height
    });
  });
});

/* Ensure images load in natural sizes initially */
img {
  width: auto;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placehold.it/900x100" /><br />
<img src="https://placehold.it/450x100" /><br />
<img src="https://placehold.it/100x100" />

- gfullam

Answer 3

如果没有使用JavaScript，无法保持其高度，同时将宽度设置为100%。

- Eduardo Henrique

---

那会非常奇怪。我希望这不是真的。 - Adam Pietrasiak

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Eduardo Henrique

Answer 4

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

height: auto;

- Eduardo Henrique

---

OP明确提到忽略比例。 - isherwood

Answer 5

你需要一个响应式图片类，它可以自动调整图像大小以适应视口的宽度，并动态更改其高度。

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

关键是将图像设置为块级元素，并自动确定其高度，同时将宽度限制为可用列的100％。

- serraosays

---

OP想要100%的宽度，而不是限制。 - isherwood

Answer 6

编辑：抱歉，我在看了这个fiddle之后误读了您不知道高度的问题。我是根据那张图片来判断的。

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

当使用%来调整大小时，它将基本上“填充”其容器。您可以通过拖动中间分隔条到不同的大小来查看它的工作原理，就像您提供的fiddle中所示。

在这个fiddle中：https://jsfiddle.net/q97jn9jp/3/

img {
  width: 100%;
  height: 100px;
}

你可以看到图片的高度保持在100像素，或者是它的自然高度，就像你所解释的那样。而宽度则会拉伸以填满容器的宽度。

同样地，如果你不包括高度，它将随着宽度进行缩放，这就是你在你的fiddle中所经历的情况。

希望这能有所帮助。

- dbrree

---

他不知道图片的高度。它可能是任何值。硬编码为100像素不是一个选项。 - Drew Kennedy

哦，我的错，我看错了。我是根据提供的图片来判断的。 - dbrree