时间戳

首页 > 解决方案 > 无法将图像放入网格单元格中

html - 无法将图像放入网格单元格中

问题描述

我有一个 div 元素，它在 3x3 网格中被破坏，我想在 div 的左端添加一个图像，该图像仅延伸 1 列但所有三行。这是我的第一个 HTML 和 CSS 项目，所以我很确定我的代码大多是混乱的，我可能错过了一些明显的东西。

我尝试插入的图像被标记为“The Well”，尺寸为 1024x1600 像素。另外，我假设为图像设置一个固定的高度和宽度会导致不同设备宽度和东西的错误，那么有什么方法可以实现我想要使用相对大小的内容吗？感谢您在此事上提供的任何帮助。

PS：HTML和CSS如下：

* {
    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>

标签： htmlcss

解决方案

就在.book1set width: 100%;，删除height它看起来：

.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;
}

.book1 img对于setmax-width: 100%;和的属性height: 100%;：

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

对其他书也一样...

推荐阅读