我的徽标被裁剪了，没有显示完整尺寸 (CSS)

Question

我的徽标有问题(pic1) 我不明白为什么没有正确显示。当我尝试调整 window（从 PC 视图到移动设备）的大小时，它第一次不起作用然后在我将网站上传到 netlify 后，我发现它在 PC 视图上无法正常工作。下面是我的代码。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--smallFont);
    max-width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body{
    line-height: 1.2;
}
.container{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* text-align: center; */
    position: relative;
    padding: 0 1.2rem;
}
.container::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.3);
}
#bg-video{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  

.logo{
    margin-top: 10vh;
    height: auto;
    width: 350px;
    
}

<body>


    <div id="Acasa" class="container">

        <video autoplay muted loop id="bg-video" Set_VideoRate()>
            <source src="2 (3).mp4" type="video/mp4">
        </video>

       
        <div class="content">
            
           
            <div class="titlu">
                <img class="logo" src="logo.png" alt="logo">
                
            </div>

        </div>
    </div>

Answer 1

它工作得很好。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--smallFont);
    max-width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body{
    line-height: 1.2;
}
.container{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* text-align: center; */
    position: relative;
    padding: 0 1.2rem;
}
.container::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.3);
}
#bg-video{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  

.logo{
    margin-top: 10vh;
    height: auto;
    width: 350px;
    
}

<body>


    <div id="Acasa" class="container">

        <video autoplay muted loop id="bg-video" Set_VideoRate()>
            <source src="2 (3).mp4" type="video/mp4">
        </video>

       
        <div class="content">
            
           
            <div class="titlu">
                <img class="logo" src="https://i.stack.imgur.com/JjqWj.png" alt="logo">
                
            </div>

        </div>
    </div>

Answer 2

最好使用“max-width”而不是“.logo”的宽度以获得更好的浏览器兼容性。在我的 Firefox 开发版 (101.0b9) 中 mac 你的代码工作正常。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--smallFont);
    max-width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body{
    line-height: 1.2;
}
.container{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* text-align: center; */
    position: relative;
    padding: 0 1.2rem;
}
.container::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.3);
}
#bg-video{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  

.logo{
    margin-top: 10vh;
    height: auto;
    max-width: 350px; /* better use max-with for better brower copatibility */
    
}

<body>


    <div id="Acasa" class="container">

        <video autoplay muted loop id="bg-video" Set_VideoRate()>
            <source src="2 (3).mp4" type="video/mp4">
        </video>

       
        <div class="content">
            
           
            <div class="titlu">
                <!--img class="logo" src="logo.png" alt="logo"-->
                <img class="logo" src="https://via.placeholder.com/350" alt="logo">
            </div>

        </div>
    </div>

我的徽标被裁剪了，没有显示完整尺寸 (CSS)

My Logo is cut and don't show it's full size (CSS)

html

css