Html 使用CSS网格调整图像大小_Html_Css_Css Grid

Html 使用CSS网格调整图像大小

html css

Html 使用CSS网格调整图像大小,html,css,css-grid,Html,Css,Css Grid,我正在尝试使用CSS网格调整图像大小。这是我的CSS代码： /* General */ * { padding: 0; margin: 0; } html { height: 100%; background-image: url("/assets/images/background.png"); background-repeat: repeat; } body { height: 100%; } /* Grid */ .g

我正在尝试使用CSS网格调整图像大小。这是我的CSS代码：

/* General */
* {
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
    background-image: url("/assets/images/background.png");
    background-repeat: repeat;
}
body {
    height: 100%;
}
/* Grid */
.grid-container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}
/* Menu-Logged-Out */
.menu-logged-out {
    grid-column: 3 / 11;
    grid-row: 2;
}
.menu-logged-out img {
    min-width: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover
}

下面是我的HTML代码：

!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>asd</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='/assets/css/header.css'>
</head>
<body>

<!-- Grid -->
<div class="grid-container">
    <div class="menu-logged-out">
        <img src="#####">
    </div>
</div>


</body>
</html>

！DOCTYPE html>
自闭症

但是图像溢出了我的CSS网格，看起来像这样：

我怎样才能解决这个问题

问候

多米尼克：）

我已经改变了几个属性，我相信这就是你想要的

*{
填充：0；
保证金：0；
}
html{
身高：100%；
}
身体{
身高：100%；
}
/*网格*/
.网格容器{
身高：100%；
显示：网格；
网格模板列：重复（12，1fr）；
网格模板行：重复（12,8.5%）；
}
/*菜单已注销*/
.菜单已注销{
网格柱：3/11；
网格行：2；
宽度：100%；
身高：100%；
边框：实心1px红色；
}
.菜单已注销img{
最大宽度：100%；
最大高度：100%；
显示：块；
适合对象：封面
}

不确定这里的最终目标是什么，您有一个12x12网格，但有一个子元素包含一个要跨越整个网格的图像？就是它吗？就是它！非常感谢。