简单网格布局中的图像

时间：2020-08-01 14:22:07

标签： html css layout grid

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

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

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

[！[SCREENSHOT BELOW] [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

3 个答案:

答案 0 :(得分：1)

选中此项，可能会解决您的问题。尝试在脚本下面运行此

import altair as alt
import pandas as pd

source = pd.DataFrame({
    'a': ['A', 'B', 'B', 'B', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

data = source.groupby('a').sum().reset_index()

alt.Chart(data).mark_bar().encode(
    x='a',
    y=alt.Y('b', title='Sum of b')
).interactive()

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

答案 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>
    <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

答案 2 :(得分：0)

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

相关问题
最新问题