html – img项目的CSS网格很好地运行,但是当imgs获得div包装器时会中断

概述这是我第一次修补CSS Grid.我用它制作了一个响应式图像网格,在玩具示例中非常好用.但是,当我尝试在我的实际项目中使用代码时,一切都以非常奇怪的方式中断.打破它的第一步是为图像添加div包装器. (我使用包装器为图像和一些额外的样式提供占位符). JSfiddle for CSS grid that works with imgs <div class="grid"> <img class 这是我第一次修补CSS GrID.我用它制作了一个响应式图像网格,在玩具示例中非常好用.但是,当我尝试在我的实际项目中使用代码时,一切都以非常奇怪的方式中断.打破它的第一步是为图像添加div包装器. (我使用包装器为图像和一些额外的样式提供占位符).

JSfiddle for CSS grid that works with imgs

<div >  <img  src="https://via.placeholder.com/200" />  <img ...

JSfiddle for CSS grid that doesn’t work after adding div wrappers

<div >  <div ><img src="https://via.placeholder.com/200" /></div>  <div ...

我知道包装器在玩具示例中没有做任何有用的事情.这是我的实际项目的一个愚蠢版本,其中包装器很有用.我是否可以修复CSS GrID以使其与包装器一起使用？

解决方法 你必须在CSS后面给你的imgs：

.grID img {  display: block;  wIDth: 100%;  height: auto;}

>在你的第一个例子中.item =你的图像
他们得到宽度100％,这很好.
>在你的第二个例子中.item =你的div包装器
这就是为什么你的图像获得正常宽度(在你的情况下为200px)

使用上面的CSS你可以防止这种情况.

总结

以上是内存溢出为你收集整理的html – img项目的CSS网格很好地运行,但是当imgs获得div包装器时会中断全部内容，希望文章能够帮你解决html – img项目的CSS网格很好地运行,但是当imgs获得div包装器时会中断所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。