（對不起，如果我的英語不是那么好）我的代碼有問題，我正在嘗試創建一個背景影像全尺寸螢屏，但是當我的影像不對應時，它只會在高度或長度上扭曲大小影像。我想要做的是裁剪它而不是變形它......我的代碼：
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;
}
圖片
uj5u.com熱心網友回復：
這里的主要錯誤是這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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/445622.html
下一篇：Word2Vec尺寸不正確