Je suis actuellement en train d'essayer de faire une animation dont la position finale devrait ressembler à ceci, comme on le voit dans l'image ci-dessous, NoE Thay sa une animation
p> Cela a bien fonctionné jusqu'à ce que je passe à une résolution 
p>
J'ai utilisé "VW /%" donc je ne comprends donc pas pourquoi est-ce que cela se passe. p>
et le code lui-même p >
p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo"> <!-- background sky -->
<div class="olasFront"></div> <!-- Frontal waves -->
<div class="bote"> <!-- boat -->
<div id="interrogacion"> <!-- question mark -->
</div>
</div>
<div class="olasBack"></div> <!-- back waves -->
</div>
</body>
</html>3 Réponses :
Je pense que vous devez utiliser la requête multimédia selon vos modifications de largeur
Je fais la taille fixe de l'image. Essayez de redimensionner avec Codepen
p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo">
<div class="olasFront"></div>
<div class="bote">
<div id="interrogacion">
</div>
</div>
<div class="olasBack"></div>
</div>
</body>
<!-- Frontal waves -->
</html>Avec ce code, nous modifions simplement la taille des antécédents en conséquence, d'autres objets pour conserver le même rapport d'aspect dans chaque écran.
p>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo"> <!-- background sky -->
<div class="olasFront"></div> <!-- Frontal waves -->
<div class="bote"> <!-- boat -->
<div id="interrogacion"> <!-- question mark -->
</div>
</div>
<div class="olasBack"></div> <!-- back waves -->
</div>
</body>
</html>
Je pense que vous devriez définir
arrière-format pour redimensionner correctement les images et peut êtrearrière-plan outraduire pour faire les animations. Malheureusement, je pense que vous devez réajuster vos valeurs pour que cela fonctionne bien.Tous les éléments à l'intérieur de Div.Fondo doivent être positionnés par rapport au conteneur (div.fondo) et non par rapport à la fenêtre.