如何将图像插入 CSSGrid 中？
我正在尝试将这 8 个图像插入到 CSSGrid 中。我将网格设置为 4 列和 2 行。我将 img 的高度和宽度设置为 100%，认为它会占用每行一列的空间。相反，图像比预期的要大得多。我使用嵌套网格，我认为我没有正确实现。例如，我将图像的宽度和高度设置为300px，一行将有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>
交互式爱情2回答
-
隔江千里
拼写错误.zone blue至.zone.blue.zone.blue{ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr;} -
拉风的咖菲猫
插入图像标签使用DIV标签并添加背景属性背景图像： url('../images/abc.jpg');图像标签很难按要求对齐。div 是最好的解决方案。如果你想要更详细的网格系统，请使用flex，它是更高效和流行的一种。
随时随地看视频慕课网APP
相关分类
Html5