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

Posted 2021-05-13

/* 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%;
}