html - 如何在网格中定义图库响应图像大小

Question

.gallery 中的所有 12 个 li img 在 codepen.io 中正确显示，但当被引入 jsfiddle 时 https://jsfiddle.net/n61y2acv/它打破并显示过去的 .gallery 宽度。为什么会出现这种情况？

.gallery {
 display: grid;
 grid-gap: 0.75rem;
 grid-auto-flow: dense;
 padding: 40px;
 list-style: none;
 background: white;
 width: 100%;
 box-sizing: border-box;
 margin-top: 0;
 margin-bottom: 0;

  li  {
   figure, img {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius:15px;
    display: block;
    object-fit: cover;
   }
 }
}

Answer 1

给你的图像元素最大宽度!

img {
  max-width: 100%;
}