图片等比例缩放

前言

  前端工程师开发的网站是直接与用户打交道的,网页用户体验的好坏也直接或间接地体现了一个前端工程师水平的高低。特别是对于C端(用户端)网页的开发,用户体验至关重要。
  目前,根据终端设备的不同,大体可将网站开发分为PC站和移动端H5页面两种。近些年来由于HTML5标准的普及以及移动端H5页面开发周期一般短于app端发版周期,不少app中都嵌入了相应了H5页面。前端技术的普及和流行促使前端工程师开发出用户体验更好、性能更优的网页。

图片适配不同终端设备

  目前终端设备的屏幕尺寸和分辨率纷纷杂杂,对于同一尺寸的图片而言,它在某些宽屏设备上可能显示的非常完美,但是在某些窄屏手机上会显示不全。为了让网页具备更好的用户体验,从而吸引更多的用户资源,网页图片需要自适应不同的终端设备。
  为了解决图片的适配问题,最常用也是笔者认为最合适的解决方案就是图片的等比例缩放

图片等比例缩放

  图片等比例缩放,顾名思义,就是图片的宽高以固定的比值变化。图片宽高比值的确定一般有两种方式:1、不管图片原始尺寸的大小,统一将图片压缩、裁剪至所需要的比例。2、保留图片原始宽高比进行缩放。
  第一种方法一般借助于图床来对图片进行压缩和裁剪,有些图床可以支持在图片url中加上尺寸后缀来获得对应尺寸的图片。第二种方法也可以借用图床来实现,有些图床支持在图片url上只加上宽或高的尺寸后缀来获得按照图片原始比例压缩、裁剪后的图片。如果前端项目中涉及的图片较少,无需借助于图床功能,可以借助于HTML5中img标签的特性,来设置图片按照其原始宽高比进行缩放。利用CSS设置img标签的宽度或者高度(只设置一个),浏览器会根据图片自身的宽高比来计算img标签的另外一个属性的值,由此就可以实现保留图片原始宽高比进行缩放。

图片等比例缩放的优化实现

  浏览器将图片当做独立的文件单独加载,如果只是借助于img标签按照上述方法来实现图片的等比例缩放,会导致浏览器下载解析完一张图片后重新调整页面的布局,造成页面不规律的移动,极大损害用户体验。可以采用如下方法来优化图片等比例缩放的实现。
  为img标签设置一个父元素,设置img标签的父元素具有和图片相同的宽高比,然后利用CSS设置img标签的width值为100%或者height值为100%,保证图片刚好充满整个父元素空间。设置图片父元素具有和图片相同的宽高比的目的是在浏览器下载解析完图片之前,父元素充当页面占位符的作用,防止浏览器为了放置图片而重新布局页面。在图片被下载解析完成之后,图片刚好充满整个父元素,用户从视觉上感受不到父元素的存在。
  如何让img标签父元素表现出特定的宽高比?可以通过设置父元素的padding值来实现。查阅MDN文档可以发现,当元素的padding值为百分比值时,其参照值是元素包含块的width值。在img标签父元素包含块的宽度已经根据不同终端设备上的适配需求设定好的前提下,可以通过设置父元素的width值为100%,padding-bottom或者padding-top值为所要实现的宽高比(百分数形式),并且height等于0来实现img标签父元素width值和真实高度(包含padding-top或者padding-bottom值)具有固定比值的目的。虽然父元素的height值为0,但是其子元素可以溢出父元素height部分并且充满padding部分,其视觉效果与父元素height值与with值呈特定比例时一致。