代码之家 › 专栏 › 技术社区 › Dylan Davenport

如何使用CSS网格布局利用响应图像

responsive-images css-grid grid-layout css

0

Dylan Davenport · 技术社区 · 9 年前

我一直在使用新的CSS网格布局,但有一件事我似乎找不到太多信息,那就是如何使图像具有响应性??我尝试使用媒体查询并将图像宽度设置为100%,但图像仍溢出网格之外。我错过了什么?

2 回复 | 直到 9 年前

1

0

SantoshK Lachlan Stirling 9 年前

您可以使用以下概念:

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height =  getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/'+width+'/'+height+'" alt="pretty kitty">';
}

$('#photos').append(allImages);

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="photos"></section>

2

0

Anmol Sandal 9 年前

提供imd默认样式 max-width:100%