Question

你好我有一个关于我如何使图像与div具有相同高度的问题。我尝试将高度改为100％而没有成功，并且使用了物体贴合。这里我有一些代码。如果您运行代码块，您会在图像上方看到一些文本，如果您选择了文本，则会看到它位于图像下方。这是困扰我并阻止我取得进步的部分。我想要实现的是让图像与wrapper__content具有相同的高度。对于喜欢的人，我会给jsfiddle提供一个链接：https://jsfiddle.net/remcoBaas99/pbrwuhn5/7/。另外一个快速通知：我最近更改了背景图片，并因为替换文字而将其替换为<img>元素。

＆＃13;

.wrapper {
    position: relative;
    overflow: hidden;
    color: #fff;
}

.wrapper__figure {
    position: absolute;
    margin: 0;
    z-index: -1;
}

.wrapper__content {
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.inner {
    position: relative;
    margin: auto;
    padding-top: 40px;
}

img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

＆＃13;

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <figure class="wrapper__figure">
                <img src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
            </figure>
            <div class="wrapper__content">
                <h2>Test</h2>
                <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

                    Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
                    
                    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
                    
                    Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.
                    
                    Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
            </div>
        </div>
    </body>
</html>

＆＃13;

Answer 1

将height: 100%;添加到img和.wrapper_figure

所以这两条规则应该是这样的：

.wrapper__figure {
    position: absolute;
    margin: 0;
    z-index: -1;
    height: 100%;
}

img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}

将图像大小调整为相对div

1 个答案: