css 使所有不同大小的图像在网格中均匀缩放

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 使所有不同大小的图像在网格中均匀缩放相关的知识,希望对你有一定的参考价值。

/* presuming that the a element has a background image */
.grid .column a { 
  width: 100%;
  overflow: hidden;
  display: block;
  /* scale the image proportionally based on the elements height and width */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* make the elemnts height a 1:1 ratio with it's width */
  height: 0;
  padding-bottom: 100%;
}

以上是关于css 使所有不同大小的图像在网格中均匀缩放的主要内容,如果未能解决你的问题,请参考以下文章

响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标

使用css网格均匀分布的图像

Flex网格和背景图像并排响应/缩放问题

CSS如何使文本像图像一样缩放

在引导响应网格中裁剪图像的纵横比

CSS图像缩放以适应区域不扭曲