为什么我的照片没有显示完整的自我？答案

【问题标题】：Why does my picture doesn't show it full self?为什么我的照片没有显示完整的自我？
【发布时间】：2020-05-19 09:56:40
【问题描述】：

这是我的 CSS：

.navbarLogo {
                position: fixed;
                left: 0;
                top: 0;
                width: 7%;
                height: 7%;
                background: url(/Images/Logo.png) no-repeat;
                background-position: center;
                transform: translateY(20%);
                transform: translateX(20%);
                z-index: 10;
            }

HTML：

<div>
            <div class="navbar" href="#home">
                <navbarText class="navbarBtnAbs">home</navbarText>
            </div>
            <div class="navbarFixed" href="#home">
                <navbarText class="navbarBtnFixed">home</navbarText>
            </div>
            <div class="navbarPic">
                <div class="navbarLogo">
                </div>
            </div>
        </div>

结果就是这样：

以及我想要的：

似乎是什么问题？

【问题讨论】：

标签： html css asp.net

【解决方案1】：

在 css 中，背景设置为图像。

.navbarLogo {
            position: fixed;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background: url(your path) no-repeat;
            background-position: center;
            transform: translateY(20%);
            transform: translateX(20%);
            z-index: 10;
        }

宽度和高度计算您为图片提供的可用空间大小。如果您的图像大于高度 200px，它将被切断。如果您只想使其适合您给定的宽度高度，您可以使用

background-size:contain;

或者你可以给它一个值background-size:200px 200px;或一个百分比background-size:10%;

【讨论】：