html - 适用于没有固定宽度的容器的图像纵横比

Question

我不太了解宽高比，这就是为什么我今天需要一些帮助。

问题

我一直在创建一个“关于团队”页面，并拍摄了一些照片，但摄影师想知道应该将照片编辑成哪个纵横比。我不知道什么是适合我的目的的良好纵横比。

上下文和信息 引导卡设计的示例: https://jsfiddle.net/onigetoc/Lx1gs0pk/

基本上这是我们正在查看的代码类型:

  <div class="card">
  <img class="card-img-top" src="..." alt="Card image cap" style="width: 100%;height:150px;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

抱歉，我无法添加自己的代码，因此我提供了示例。

图像的高度为 150 像素，但宽度为 100% 以填充容器。

容器的宽度根据屏幕宽度而变化，因此屏幕上可能有 1 张卡片(移动设备)或屏幕上有多张卡片，因此我们不知道图像的宽度。

在这种情况下，当我们知道高度但不知道宽度时，最佳纵横比是多少？

我听说通常使用 4:3 的宽高比。

感谢您的帮助。

Answer 1

纵横比属于对象。它最初是 x 宽 x 高。这创造了它的纵横比。使用 img 标签，如果您只指定宽度或高度，另一侧将按比例缩放。如果同时指定(宽度和高度)，图像将以这些尺寸显示(这会放弃图像的纵横比)。

您可以使用百分比来确定宽度或高度。因此，如果在具有不同宽高比的设备上查看它，您的图像将始终仅使用该百分比的屏幕空间，同时保持图像的宽高比。

更新:如果您使用图像作为背景，您还有其他选项(即包含和覆盖)。使用 contain 将适合(显示)您的整个图像在父级中。使用 cover 时将用图像填充整个父级(可能挤压或拉伸(stretch)图像)。

希望能帮助您理解纵横比位。