我怎样才能拥有没有任何变形的封面背景图像？

Question

（对不起，如果我的英语不是那么好）我的代码有问题，我正在尝试创建背景图像全尺寸屏幕，但我的图像在高度或长度上扭曲' 对应于大小图像。我想要做的是裁剪它而不是对其进行变形...我的代码：

HTML

<div class="container-fluid px-0">
    <main>
        <!-- Accueil -->
        <section>
            <div class="container justify-content-start">
                <img class="img-fluid" src="ressources/images/picto_appareil_photo.jpg" alt="" title="" width="200" height="200">
                <h2>Matheo TUMBARELLO</h2>
                <h1>Etudiant BUT informatique<br><br>Aspire à devenir développeur web & mobile fullstack</h1>
            </div>
        </section>
        
        <!-- Formations -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Compétences -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Portfolio -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Experiences -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Contact -->
        <section class=""> 
            <form>

            </form>
        </section>
    </main>
</div>

CSS

@keyframes zoomloop {
    0% {
      background-size: 100% 100%;
    }
    100% {
      background-size: 105% 105%;
    }
  }
section:first-child{
    height: 100vh;
    background: url("ressources/images/background_laptop.jpg") top right;
    background-position: cover;
    animation: zoomloop 5s infinite alternate;
}

image

Answer 1

这里的主要错误是 cover 是 background-size 的值而不是 background-position

这应该可以解决问题：

background: url("ressources/images/background_laptop.jpg"); /*Remove initial top right instruction*/
background-size: cover;
background-position: 50% 50%;

如果你想让你的图片在制作缩放效果的同时保持比例，你需要auto 属性。根据图像比例，缩放将应用于图像的高度或宽度

.image {
    background-size: 100% auto;
}
.image:hover {
    background-size: 105% auto;
}

我怎样才能拥有没有任何变形的封面背景图像？

How can i have a cover background-image without any deformation?

css

background

image

background-image

twitter-bootstrap