使用CSS或jQuery如何保持图像的宽高比？

Question

4

我有一些尺寸为(900x512)的图片。由于我要使其响应式，因此图片需要在屏幕宽度内调整大小，同时保持纵横比！

- Jim Fahad

3个回答

1

如果您正在使用Bootstrap，您可以将标签添加img-responsive类。

这个类应用以下css属性：

标记看起来像这样：

<img class="img-responsive" alt="My image" >

- Richard Hamilton

0

你可以通过在CSS中仅设置宽度或高度来实现这一点。

.image{
  width: 40%;
  border: 1px solid #ffffff;
}

- sillysicko

如果高度在其他地方设置，这将无法正常工作。您还需要添加“height: auto;”以防止高度固定而宽度流动。 - random_user_name

如果你同时设置宽度和高度，那么"true"选项就会被忽略。但是，如果你能够控制你自己的CSS，那么这是一种有效的，实际上也是唯一的选项。一旦你设置了高度和宽度，它就不会起作用。 - sillysicko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CoderPi · Accepted Answer

使用：

<img src="..." style="width: 100%; height: auto;" />

这将保持宽高比。 height: auto 确保未在其他地方设置 height（如 cale_b 所述）。