时间戳

首页 > 解决方案 > 适用于没有固定宽度的容器的图像纵横比

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

问题描述

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

问题

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

背景和信息 引导卡设计的示例： 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 的纵横比。

谢谢您的帮助。

标签： htmlcssresponsive-designimage-sizeresponsive-images

解决方案

纵横比属于对象。它最初是 x 宽 x 高。这创造了它的纵横比。使用 img 标签，如果只指定宽度或高度，另一边会按比例缩放。如果同时指定（宽度和高度），则图像将以这些测量值显示（这将放弃图像的纵横比）。

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

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

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

推荐阅读