简单网格布局中的图像

问题描述 投票：0回答：3

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

我使用此代码，但某处有错误：

HTML代码和CSS代码：

   .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%;
}

<!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>

屏幕截图： SCREENSHOT BELOW

html css layout grid
3个回答
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>

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>
    <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
属性。 结果如下： enter image description here

0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.