Cannot fit image to parent div size in image gallery-CodePudding

I am trying to create a responsive image gallery (JSFiddle) with CSS Grid but when I add images to the grid elements, the images don't fill their entire size. I don't care about aspect ratio, I just want the image to fit exactly into the parent div while the size of the parent div remains the same (squared).

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    width: 100vw;
}

.view-container {
    padding: 20px;
    width: 70%;
    margin: auto;
    border: solid red;
    display: flex;
    justify-content: center;
}

.view-grid {
    flex: 1 1 auto;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    list-style: none;
}

.grid-el-container {
    width: min(300px, 100%);
    padding-bottom: min(300px, 100%);
    background: blue;
    border: solid;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.grid-el-content {
    position: absolute;
    background: lightblue;
    overflow: hidden;
}

.grid-el-bg {
    max-height: 100%;
    max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>CSS Grid</title>
</head>
<body>
<div >
    <div >
        <div >
            <div >
                <img src="https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="villa" >
            </div>
        </div>
        <div ><div >Box 2</div></div>
        <div ><div >Box 3</div></div>
        <div ><div >Box 4</div></div>
        <div ><div >Box 5</div></div>
    </div>
</div>
</body>
</html>

CodePudding user response：

There are 2 main problems here. The first is that the div containing the element doesn't take up its entire parent, so the image is already at 100% height and width. The second is that you're only setting the max height and width of the image, not the actual height and width.

Let's address the parent first. This can simply be solved by adding width: 100%; and height: 100%; to the parent div. If you only want the div to have 100% height and width if it has an image inside of it, you will probably have to write some JavaScript to handle that.

Now let's go to the actual image. Really it's a matter of adding the exact same thing here (width: 100% and height: 100%). This alone should resolve your issue, but there is one more thing I would like to add. I know you said you don't care about the aspect ratio, but, if you would rather the image be cut off than distorted, you can use object-fit: cover; here as well.

Here is a JSFiddle with the revised CSS

The completed CSS after the changes:

.grid-el-content {
    position: absolute;
    background: lightblue;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.grid-el-bg {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

CodePudding user response：

Try this:

.grid-el-bg {
  object-fit: cover;
}

Remove min-width and min-height from this class.