图片自适应网格盒子

在网页里少不了图片这个元素,而图片本身的尺寸在网页里情况比较复杂,其中有一类情况是在网格盒子里放入一张图片,当这类固定大小的盒子与图片不是相同尺寸时,图片在盒子里就会显示异常,这篇文章将会告诉你应该在这时需要怎样的设置以使得图片自适应固定大小的盒子。

 

如果图片和盒子尺寸不同,想要让图片在盒子里刚好填满,图片又不会被异常压缩,就需要如下一些设置。

设置一:【高度】:填满

点击盒子里的图片下方的标签<img>时,在工作区上会出现一栏有关盒子的设置,其中在【高度】这一项,你可以选择“填满”。

这时,填满后出现的问题时,图片就会被不成比例的拉伸。接着,我们就需要继续设置。

设置二:【大小】:覆盖

单击图片,在工作区上方会出现一栏有关图片的设置,其中在【大小】这一项,可以选择图片填充盒子的方式,你可以选择“覆盖”。

设置三:【位置】

在【大小】的左侧有【位置】的设置,对之前所做的设置做进一步的位置的调整。

注意:以上所针对的是固定大小的网格盒子,如果只是普通的静态组件里的图片,图片会自动撑起整个盒子区域,没有特殊情况无需经过这样的设置。