如何使绿色图像占据每个矩形的全境？
我使用了这段代码，但有一个错误:
null
.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;
}null
[！[下面的屏幕截图][1]][1]
null
<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>null
截图:[1]:https://i.stack.imgur.com/vjqca.jpg
检查一下这个，它可能会解决你的问题。 尝试运行下面的脚本
null
.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>