CODEWITHSUNDEEP
htmlcss
Jacob Frye
Jacob Frye

Reputation: 55

Unable to fit an image in a grid cell

I have a div element that has been broken in a 3x3 grid and I want to add an image in the left-end of the div that stretches across just 1 column but all the three rows. This is my first project with HTML and CSS, so I'm pretty sure my codes are mostly mess and I might have missed out something obvious.

The image that I'm trying to insert is marked as 'The Well' and has a size of 1024x1600 px. Also, I assume setting a fixed height and width for the image can lead to error on different device widths and stuff, so is there any way I can achieve what I want to using relative sizing? Thank you for any assistance in the matter.

PS: HTML and CSS as follows:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

header {
    position: relative;
    width: 100%;
    display: flex;
    padding: 30px 100px;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(#182848, #4b6cb7);
}

header .logo a{
    color: whitesmoke;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 3em;
}

header nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav ul li {
    list-style-type: none;
}

header nav ul li a {
    text-decoration: none;
    padding: 10px;
    color: whitesmoke;
    border-radius: 20px;
}

.main-content {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 0.5fr 3fr 0.5fr;
}

.book-wrapper {
    grid-column-start: 2;
    grid-column-end: 3;
    padding: 50px 10px;
}

.book1 {
    width: auto;
    height: 250px;
    margin: 10px;
    padding: 10px 10px;
    border-style: solid;
    border-radius: 1px;
    border-color: black;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.book1 img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    grid-area: 1 / 1 / span 3 / span 1;
}

.book1 h2 {
    grid-area: 1 / 2 / span 1 / span 2;
}

.book1 p {
    grid-area: 2 / 2 / span 3 / span 3;
}

.book2 {
    margin: 10px;
    height: 250px;
    padding: 10px 10px;
    border-style: solid;
    border-radius: 1px;
    border-color: black;
}

.book3 {
    margin: 10px;
    height: 250px;
    padding: 10px 10px;
    border-style: solid;
    border-radius: 1px;
    border-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">
            <a href="index.html">GRAPE</a>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About Me</a></li>
            </ul>
        </nav>
    </header>
    <div class="main-content">
        <div class="book-wrapper">
            <div class="book1">
                <img src="images/The Well.png" alt="book cover">
                <h2>Masquerade</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, modi. Atque voluptatem illo quas libero error minus pariatur cum eius eligendi consequatur. Tempora, minima perspiciatis.</p>
            </div>
            <div class="book2">
                <img src="#" alt="book cover">
                <h2>13 Steps</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste quia qui sint non beatae labore eos excepturi commodi soluta? Modi, quidem. Officiis, ipsa consectetur! Repudiandae.</p>
            </div>
            <div class="book3">
                <img src="#" alt="book cover">
                <h2>Project Aphrodite</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste quia qui sint non beatae labore eos excepturi commodi soluta? Modi, quidem. Officiis, ipsa consectetur! Repudiandae.</p>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Views: 59

Answers (1)

Demystifier
Demystifier

Reputation: 61

Just at .book1 set width: 100%;, remove height it looks:

.book1 {
    width: 100%;
    margin: 10px;
    padding: 10px 10px;
    border-style: solid;
    border-radius: 1px;
    border-color: black;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

and for properties of .book1 img set max-width: 100%; and height: 100%;:

.book1 img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    grid-area: 1 / 1 / span 3 / span 1;
}

Do for other books same...

Upvotes: 1

Related Questions