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

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

    UI设计中什么是纵横比?

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

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

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

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

    像素纵横比

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

    显示纵横比

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

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

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

    存储纵横比

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

    纵横比影响UI/UX设计

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

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

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

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

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

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