使用CSS Grid调整图像大小
多米尼克·米斯克维奇（Dominik Miskovic）
我正在尝试使用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>
但是图像溢出了我的CSS网格，看起来像这样：
我该如何解决？
问候多米尼克:)
假
我更改了几个属性，我相信这是您想要的
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
/* Grid */
.grid-container {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 8.5%);
}
/* Menu-Logged-Out */
.menu-logged-out {
grid-column: 3 / 11;
grid-row: 2;
width: 100%;
height: 100%;
border: solid 1px red;
}
.menu-logged-out img {
max-width: 100%;
max-height: 100%;
display: block;
object-fit: cover
}<div class="grid-container">
<div class="menu-logged-out">
<img src="https://via.placeholder.com/150">
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS使图像调整大小并适合任何屏幕
- 2
CSS图像按高度调整大小
- 3
使用PHP直接从URL调整图像大小
- 4
使用CSS调整大小和裁剪图像
- 5
如何防止在CSS中调整图像大小？
- 6
使用CSS调整图像大小
- 7
使用javascript调整图像大小
- 8
在Ubuntu上使用convert调整图像的大小
- 9
调整NSAttributedString中使用的图像的大小
- 10
使用createjs / easyljs调整图像大小
- 11
CSS图像调整大小问题
- 12
使用CSS调整图像的裁剪部分的大小
- 13
在CSS-Grid内调整gatsby-background-image内文本的大小可调整整个图像的大小
- 14
如何使用CSS调整图像大小以适合其容器
- 15
使用flexbox / grid流畅调整内容大小
- 16
如何使用CSS调整HTML中的图像大小
- 17
自动调整CSS中图像的大小
- 18
使用CSS调整图像大小
- 19
使用imagemagick调整图像大小
- 20
CSS悬停边框，无需调整图像大小
- 21
使用Java调整图像大小
- 22
使用PHP或CSS调整图像大小？
- 23
使用CSS调整所有大图像的大小
- 24
使用CSS调整图像大小
- 25
使用CSS动态调整图像大小
- 26
使用CSS缩放图像而无需调整大小
- 27
CSS / JS调整大小以适合图像大小
- 28
CSS 图像水平调整大小
- 29
使用 javascript 调整图像大小
我来说两句