简单网格布局中的图像答案

【问题标题】：Images in a simple grid layout简单网格布局中的图像
【发布时间】：2020-11-22 03:38:39
【问题描述】：

如何让绿色图像占据每个矩形的整个区域？

我使用了这段代码，但某处有错误：

   .grid {
  position: relative;
  margin: 0 auto;
  padding: 1em 0 4em;
  max-width: 1000px;
  list-style: none;
  text-align: center;
}

.grid h2 {
    color: #fefbfd  !important;
    background-color: transparent;
    text-transform: none;
    font-weight: normal;
    text-align: left;
    font-size: 26pt;
}

 .grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
 width: 500px;
  height: 330px;
  width: 48%;
background: #575656;      /*REMOVES GREY SQUARES*/
    text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 1;
}

.grid figure figcaption {
  padding: 2em;
  color: #575656;
  text-transform: none;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
   

 .grid figure figcaption::before,       
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {    
  position: absolute;
  top: -30px;
  left: -20px;
  width: 100%;
  height: 100%;
}
.grid figure figcaption > a {
  z-index: 1000; 
  text-indent: 200%;                 
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

                               
.grid figure figcaption h2 {      
  color: #a32914;
  word-spacing: 0em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
  
}

.grid figure h2,
.grid figure p {
  margin: 0;
}
  
.grid figure p {
  letter-spacing: 0px;
 margin: 0;
  font-size: 12pt;    
}
ul li .MathJax_Display {
    text-align: center;
    margin: 1em 0em;
    position: relative;
    /*display: block !important;*/
    display: inline !important;
    text-indent: 0;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

[![下面的屏幕截图][1]][1]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta name="generator" content="olat-tinymce-4" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></head><body><div class="container">
 <link rel="stylesheet" type="text/css"
  href="css/style.css">        
<div class="grid">
        <figure class="effect1"><a href="javascript:parent.gotonode(102071756014162)"><img src="pic1.png" caption="false" width="500" height="333" /></a>
    <figcaption>
    <h2><strong>Participants<br /></strong></h2>
    <a href="javascript:parent.gotonode(102071756033936)">View more</a></figcaption>
    <figcaption></figcaption>
    <figcaption></figcaption>
    </figure>
    <figure class="effect1"><img src="pic2.png" caption="false" width="500" height="333" />
    <figcaption>
    <h2><strong>Organisation</strong></h2>
    
    <a href="javascript:parent.gotonode(102071756014162)">View more</a></figcaption>
    </figure>

<figure class="effect-artem"><img src="pic3.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Library</strong></h2>

<a href="javascript:parent.gotonode(96464125130470)">View more</a></figcaption>
</figure>
<figure class="effect-artem"><img src="pic4.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Working Groups</strong></h2>

<a href="javascript:parent.gotonode(96464122923585)">View more</a></figcaption>
</figure>
</div>
</div></body></html>

那些是 HTML 代码和 CSS 代码下面是从那里出来的屏幕截图：

从那里出来的截图： [1]：https://i.stack.imgur.com/VjQCa.jpg

【问题讨论】：

将width:100%; height:100%; object-fit:cover; 添加到.grid figure img。看看这是否有效。您还应该添加一些 HTML 代码。 :)
谢谢，更好。但仍有一些领域。 html代码可能是什么？ drive.google.com/file/d/1k21UpDA83EKhHBSNgiZDP2eepjzZDZtF/…
用你的html代码更新sn-p代码
做到了。希望是正确的
Artem 您确定您的代码显示的输出与您在此处共享的输出相同

标签： html css layout grid

【解决方案1】：

检查一下，它可能会解决您的问题。尝试在下面运行这个脚本

.grid figure {
                position: relative;
                float: left;
                overflow: hidden;
                margin: 10px 1%;
                width: 500px;
                height: 330px;
                width: 48%;
                background: #575656; /*REMOVES GREY SQUARES*/
                text-align: center;
                cursor: pointer;
            }

            .grid figure img {
                position: relative;
                display: block;
                min-height: 100%;
                max-width: 100%;
                opacity: 1;
            }

            .grid figure figcaption {
                padding: 2em;
                color: #575656;
                text-transform: none;
                font-size: 1.25em;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

<div class="grid">
            <figure class="effect1">
                <a href="javascript:parent.gotonode(102071756014162)">
                    <img src="https://wallpaperaccess.com/full/1288076.jpg" caption="false"/></a>
                <figcaption>
                    <h2>
                        <strong>Participants<br/></strong>
                    </h2>
                    <a href="javascript:parent.gotonode(102071756033936)">View more</a>
                </figcaption>
                <figcaption></figcaption>
                <figcaption></figcaption>
            </figure>
            <figure class="effect1"><img src="https://abduzeedo.com/sites/default/files/styles/square_1x1/public/originals/abdz_infrared_arashiyama_mockup_0.jpg?itok=D_-Tf7rE" caption="false"/>
                <figcaption>
                    <h2>
                        <strong>Organisation</strong>
                    </h2>

                    <a href="javascript:parent.gotonode(102071756014162)">View more</a>
                </figcaption>
            </figure>
        </div>

【讨论】：

谢谢，但您到底改变了什么？我要试试
你已经在img标签中指定了宽度和高度。所以我把它去掉了。因为内联 CSS 比您在样式标签中使用的内部 CSS 具有更高的优先级
hm, drive.google.com/file/d/1k21UpDA83EKhHBSNgiZDP2eepjzZDZtF/view 不幸的是还是一样。我应该在我的代码中检查什么？
根据您提供的代码，基于此，我已更改代码，您可以在此处运行此代码。它是工作文件
检查你是否在img标签中指定了宽度和高度

【解决方案2】：

试试这个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="olat-tinymce-4" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .grid figure {
            position: relative;
            float: left;
            overflow: hidden;
            margin: 10px 1%;
            width: 500px;
            height: 330px;
            width: 48%;
            background: #575656;      /*REMOVES GREY SQUARES*/
            text-align: center;
            cursor: pointer;
        }

        .grid figure img {
            width: 100%;
            position: relative;
            display: block;
            min-height: 100%;
            max-width: 100%;
            opacity: 1;
        }

        .grid figure figcaption {
            padding: 2em;
            color: #575656;
            text-transform: none;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <link rel="stylesheet" type="text/css" href="css/style.css">        
        <div class="grid">
            <figure class="effect1">
                <a href="javascript:parent.gotonode(102071756014162)">
                    <img src="red.png" caption="false" width="500" height="333" />
                </a>
                <figcaption>
                    <h2><strong>Participants<br /></strong></h2>
                    <a href="javascript:parent.gotonode(102071756033936)">View more</a>
                </figcaption>
                <figcaption></figcaption>
                <figcaption></figcaption>
            </figure>
            <figure class="effect1">
                <img src="pic2.png" caption="false" width="500" height="333" />
                <figcaption>
                    <h2><strong>Organisation</strong></h2>

                    <a href="javascript:parent.gotonode(102071756014162)">View more</a>
                </figcaption>
            </figure>

            <figure class="effect-artem">
                <img src="pic3.png" caption="false" width="500" height="333" />
                <figcaption>
                    <h2><strong>Library</strong></h2>

                    <a href="javascript:parent.gotonode(96464125130470)">View more</a>
                </figcaption>
            </figure>
            <figure class="effect-artem">
                <img src="pic4.png" caption="false" width="500" height="333" />
                <figcaption>
                    <h2><strong>Working Groups</strong></h2>
                    <a href="javascript:parent.gotonode(96464122923585)">View more</a>
                </figcaption>
            </figure>
        </div>
    </div>
</body>
</html>

我添加了width 属性。结果如下：

【讨论】：

它对你有用吗？我更改了第一个图片名称，与盒子相比，这张图片非常小，非常适合。
对不起，我没有提到我的 CSS 文件的其余部分，问题应该在那里，而不是在 HMTL。因为它仍然在 4 张图像后面显示灰色方块。现在我更新了 CSS sn-p
感谢您的贡献，问题出在图像本身！

【解决方案3】：

问题出在图像本身！它们几乎是 1 Mb 大小的带有 alpha 通道的 png。当我只是用油漆切割它们并以较低的分辨率保存时 - 它已经解决了

【讨论】：