设计中的横纵比例：纵横比工具

图像丰富的内容推动网站参与度，使访问者可以细读它们的乐趣。但是，即使只是首页上的图像，也要确保将所有面向视觉的内容质量最大化。因为无论您是处理照片、插图还是视频，拉伸、挤压或裁剪不当的图像，都会给访问者留下不好的印象，并影响他们在网站上的整体体验。

确保这些图像正确显示是设计的关键部分。确定宽、高、比，在各种设备上获得最佳观看效果对设计师来说既是一件苦差事，也是一项挑战。但今天的响应式设计工具和一系列免费的宽高比计算器，可以确保图像和视频文件在任何地方都以最佳视觉显示。

什么是纵横比?

在最基本的方式中，纵横比是图像的宽度和高度之间的关系。因为纵横比反映的是图像的比例，而不是它的大小，所以纵横比无论大小都保持不变。

例如，正方形图像的纵横比为 1:1，因为其高度和宽度相同。无论图像有多大，该比率都将保持不变。320x320px 的图像与 1080x1080px – 1:1 的图像具有相同的纵横比。

对于非正方形的图像，即各种尺寸的水平或垂直矩形，纵横比可能会有所不同。摄影、视频和其他，基于图像的设计工作中使用的常见纵横比包括 4:3、3:2 或 16:9，这是许多宽屏设备，如电视和台式计算机的基本比例。

虽然图像的纵横比来自其高度和宽度的关系，但该比例的多个子集也有助于定义图像比例。

像素纵横比

像素纵横比 (PAR) 是指构成图像的单个像素的比例。像素通常是方形的，这导致像素长宽比为 1:1。但是针对某些类型的显示器优化的图像也可以具有长宽比为 4:3 或类似的矩形像素。

显示纵横比

显示纵横比 (DAR) 是与设计师最相关的一种纵横比，也是最常与通用术语相关联的一种。顾名思义，显示纵横比是指图像在各种屏幕上显示的比例。

某些设备(例如相机和电视)具有固定的 DAR，因此为了使图像在这些设备上显示良好，它们需要针对特定的纵横比进行优化。例如，要在监视器或电视屏幕上显示的宽屏视频的典型显示纵横比是 16:9。

当在这些设备上显示具有不同纵横比的图像时，它们看起来会失真。数码单反相机传感器还具有固定的显示纵横比，用于控制相机拍摄图像的保存和显示方式。

存储纵横比

存储纵横比 (SAR) 是一个纵横比公式，专门适用于编码的数字视频文件。SAR 是指视频帧大小的宽度和高度关系，它需要在所有单个帧之间保持一致，才能正确显示完整的视频。在常用的公式中，对于大多数宽屏视频，SAR x PAR = DAR。

纵横比在任何涉及以正确方式捕获和显示照片、视频或其他类型的基于图像的文件项目中都发挥着重要作用。

对于摄影师来说，相机的固定纵横比会对照片的构图以及稍后在其他设备上的显示产生相当大影响。对于摄像师和任何处理幻灯片、动画和其他运动项目的人来说，纵横比是在宽屏和移动设备上正确显示的关键因素。

转向响应式网页设计，确保内容在所有设备上正确显示，有助于解决为单个图像设置纵横比的许多问题。

但即使在这些环境中，也可能出现问题，例如无法在不影响其内容或质量的情况下调整图像以进行显示。一个简单的例子是当一个长宽比为 1:1 的方形图像需要适合网站页面上的矩形框时。为了适应不同的图像尺寸要求，可能需要调整比例和尺寸。

在日益由图像驱动的数字世界中，即使看起来稍微不成比例的视频和图像也会导致访问者对网站产生负面印象——而那些明显被迫采用错误配置的视频和图像甚至会干扰网站的可用性。

比例不当的产品图片或用户指南视频太长而看不清会影响访问者的意愿和他们使用网站的能力。设计师、开发人员和任何处理图像的人都需要知道纵横比的工作原理以及如何操纵它们获得最佳视觉效果。为了简化这个过程，网络上出现了许多免费和付费的纵横比计算器。

借助一些简单的数学运算，当然可以计算图像的纵横比并手动调整其大小。但是在处理来自多个来源的许多图像时，这变得效率低下。

在众多在线纵横比计算器之一的帮助下，您可以为多种不同格式的任何图像确定最佳纵横比，从而使设计人员能够充分优化每张图像以获得最佳观看效果。

这里推荐一个在线的网址：https://www.omnicalculator.com/other/aspect-ratio#how-to-calculate-aspect-ratio

纵横比计算器

要使用该平台，您需要知道以像素为单位的图像分辨率并选择图像出现的环境类型。然后计算器将结果作为最佳纵横比返回。这不单对于图像处理、对于视频编辑也特别有用。

其他图像管理工具也可以帮助获得正确的纵横比。Photoshop等图像编辑器提供的模板设计时考虑了最佳纵横比，适用于典型情况，例如设计网站横幅、标题或社交媒体配置文件。大多数标准视频编辑软件还允许用户确定和调整要作为视频中单独帧包含的图像的纵横比。

比例正确、显示良好且性能良好的图像是各种企业的强大工具。获得正确的纵横比可以使图像无论在何处显示都看起来不错。无论您是网页设计、APP设计、处理照片、插图或视频都可以吸引访问者并保持他们的活跃度与留存率。

通过这种方式可以轻松确保图像的大小和比例正确。

使用图像填充，您可以从多种设置中进行选择，这些设置允许您调整图像大小或裁剪图像，同时保留其纵横比以实现完美定位。