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 x高度。这就是它的长宽比。使用img标签，如果仅指定宽度或高度，则另一侧将按比例缩放。如果同时指定（宽度和高度），则将以这些尺寸显示图像（这将放弃图像的长宽比）。

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

更新：如果您将图片用作背景，则可以使用其他选项（即包含和覆盖）。使用contain将使整个图像适合（显示）在父级内部。使用封面时，整个父对象将被填充图像（可能会挤压或拉伸图像）。

希望可以帮助您了解长宽比位。

适用于宽度不固定的容器的合适图像宽高比

1 个答案: