Hi there! I'm currently working on resizing an image using a CSS grid layout. Here's the CSS code I have so far:
/* Reset */
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
background-image: url("/assets/images/background.png");
background-repeat: repeat;
}
body {
height: 100%;
}
/* Grid Layout */
.grid-container {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
}
/* Menu for Logged Out Users */
.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;
}
Here is the HTML code I have to display the image within the grid:
!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 Layout -->
<div class="grid-container">
<div class="menu-logged-out">
<img src="#####">
</div>
</div>
</body>
</html>
Unfortunately, I'm facing an issue where the image overflows the CSS grid. It looks something like this:
Any suggestions on how to resolve this problem would be greatly appreciated!
Thanks, Dominik :)