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

已添加

import {Route} from '@/app/router/Route';

class YabRouter {
    public widthOutAuthRoutes: Route[] = [];
    public systemConfigRoutes: Route[] = [];
    public staticRoutes: Route[] = [];
    public dynamicRoutes: Route[] = [];

.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并相应调整大小

1 个答案: