时间戳

首页 > 解决方案 > 如何在缩小尺寸时保持图像和 div 文本框的大小相同并响应？

html - 如何在缩小尺寸时保持图像和 div 文本框的大小相同并响应？

问题描述

我目前正在使用网格来制作彼此相等的 2 列。一列有一个带有标题的 div，另一列有一个图像。如何确保右侧的图像填满整个列？

#get-started-page .section1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pink-box {
    background: #fee5d6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
<div id="get-started-page">
    <div class="section1">
        <div class="pink-box">
            <h1>Certification</h1>
            <h2 class="lowercase">#roadmaptocert</h2>
        </div>
        <div class="image-container">
            <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" alt="hair-stylist" />
        </div>
    </div>
</div>

标签： htmlcss

解决方案

添加width: 100%和height: 100%以适应img父级的大小。还添加object-fit: cover以调整img.

#get-started-page .section1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pink-box {
    background: #fee5d6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
<div id="get-started-page">
    <div class="section1">
        <div class="pink-box">
            <h1>Certification</h1>
            <h2 class="lowercase">#roadmaptocert</h2>
        </div>
        <div class="image-container">
            <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" alt="hair-stylist" />
        </div>
    </div>
</div>

推荐阅读