html - 使图像适合 div 并相应地调整大小

Question

我目前正在学校制作一个论坛，并且正在制作个人资料页面。在这个个人资料页面上，我想要一些用户可以选择的横幅。我想让这些横幅与它们所在的 div 大小相同。我还希望它们在 div 中居中并调整它的大小。是否可以按照我在两张图片中显示的方式进行调整，横幅在调整大小时被截断？

这是我的代码:

.user-pic {
    width: 120px;
    border: 3px solid #1b1b1b;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    float: left;
    margin: 10px;
    transition: .4s ease-in-out;
    z-index: 2;
}
.user-pic:hover {
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.user-pic-overlay {
    width: 120px;
    position: absolute;
    border: 3px solid #1b1b1b;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    margin: 10px;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 3;
}
.user-pic-overlay:hover {
    opacity: .8;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
    width: 75%;
    margin: 25px auto;
    box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
    height: 33vh;
    margin: auto;
    border: 5px solid #1b1b1b;
    box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
    z-index: 2;
}
.user-header-pic {
    position: absolute;
    z-index: -2;
    margin: auto;
    width: 75%;
}
.user-header-pic-overlay {
    position: absolute;
    margin: auto;
    height: 33vh;
    opacity: 0;
    cursor: pointer;
    transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
    opacity: .8;
}
.user-header-nav {
    background-color: #1e1e1e;
    border: 5px solid #1e1e1e;
    text-align: right;
    margin: auto;
}
.user-header-btn {
    margin: 5px 5px 5px 5px;
    padding: .4em .6em;
    background-color: #424242;
    border-radius: 2px;
    font-size: 14px;
    color: #f5f5f5;
    cursor: pointer;
    border: none;
}
.user-haeder-btn:focus {
    outline: none;
}

    <div class="user-header-wrap">
        <div class="user-header">
            <img class="user-header-pic" src="../images/header.jpg" alt="">
            <img class="user-pic" src="<?php echo $ppp;?>" alt="">
            <p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
            <p class="prof-txt-2">Level</p>
        </div>
        <div class="user-header-nav">
            <button class="user-header-btn">Edit Profile</button>
        </div>
    </div>

First Image Second Image

Answer 1

添加

.user-header-pic {
    position: relative;
    z-index: -2;
    margin: auto;
    width: 100%;
    height: 100%;
}

.user-pic {
    width: 120px;
    border: 3px solid #1b1b1b;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    float: left;
    margin: 10px;
    transition: .4s ease-in-out;
    z-index: 2;
}
.user-pic:hover {
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.user-pic-overlay {
    width: 120px;
    position: absolute;
    border: 3px solid #1b1b1b;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    margin: 10px;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 3;
}
.user-pic-overlay:hover {
    opacity: .8;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
    width: 75%;
    margin: 25px auto;
    box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
    height: 33vh;
    margin: auto;
    border: 5px solid #1b1b1b;
    box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
    z-index: 2;
}
.user-header-pic {
    position: relative;
    z-index: -2;
    margin: auto;
    width: 100%;
    height: 100%;
}
.user-header-pic-overlay {
    position: absolute;
    margin: auto;
    height: 33vh;
    opacity: 0;
    cursor: pointer;
    transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
    opacity: .8;
}
.user-header-nav {
    background-color: #1e1e1e;
    border: 5px solid #1e1e1e;
    text-align: right;
    margin: auto;
}
.user-header-btn {
    margin: 5px 5px 5px 5px;
    padding: .4em .6em;
    background-color: #424242;
    border-radius: 2px;
    font-size: 14px;
    color: #f5f5f5;
    cursor: pointer;
    border: none;
}
.user-haeder-btn:focus {
    outline: none;
}

<div class="user-header-wrap">
        <div class="user-header">
            <img class="user-header-pic" src="https://images.unsplash.com/photo-1553052944-763b0cbd086a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="">
            <img class="user-pic" src="<?php echo $ppp;?>" alt="">
            <p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
            <p class="prof-txt-2">Level</p>
        </div>
        <div class="user-header-nav">
            <button class="user-header-btn">Edit Profile</button>
        </div>
    </div>