html - 如何将图像插入 CSSGrid?
问题描述
我试图将这 8 个图像插入 CSSGrid。我这样做是为了让网格有 4 列和 2 行。我将 img 的高度和宽度设置为 100%,认为它会占用每一行中一列的空间。相反,图像比预期的要大。我使用嵌套网格,我认为我没有正确实施。例如,我将图像的宽度和高度设置为 300 像素,并且一行将有 4 张以上的图片。我认为那是导致图像没有占据列的全部大小,但我不确定。当我检查元素时,我似乎看不到 CSSGrid 任何帮助?
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">
<img src="data_storage_2_2.png" alt="data storage">
<img src="desktop_analytics_2.png" alt="desktop analytics">
<img src="files_2.png" alt="files">
<img src="monitor_coding_2.png" alt="monitor coding">
<img src="monitor_settings_2.png" alt="monitor settings">
<img src= "server_2_2.png" alt="server">
<img src="server_3.png" alt="server">
<img src="server_safe_2.png" alt=server safe>
</div>
<div class="zone yellow">Made By Cristobal Manrique</div>
</div>
</body>
</html>
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 4fr 8fr 1fr;
}
.green {
display: flex;
align-self: center;
}
.green span{
margin-left: 20px;
}
#Contact {
margin-left: auto;
}
.zone blue{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
}
.zone {
padding:30px 50px;
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
display: flex;
justify-content: center;
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
img{
background-color: black;
width: 100%;
height: 100%;
}
解决方案
.zone blue
拼写错误.zone.blue
.zone.blue{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
}
推荐阅读
- python - 赋值两边都有多个值的这条线在做什么?
- javascript - 如何使用javascript使用按钮向计数器添加或减去数字?
- scala - 如何在Scala的案例类中转换日期列格式?
- python - 在我的 jupyter 笔记本上运行 .compile() 时遇到问题
- r - 如何根据另一个表中的多个条件在特定表中创建新变量
- performance - 如何高效地构造一个大的 SparseArray?包这个?
- c# - Dotnet React 模板 - 是否可以使用 /index.html
- c++ - 使用左关联 C++ 运算符时强制右关联
- php - 如果为空 $first $second
- django - 无法解析剩余部分:来自“菜单 [cat_id]”的“[cat_id]”