Probleme adaptation image

Question

Gipsy88

17 Jul 2023 à 21:23

Bonsoir, vous avez peut-être vu un post précèdent pour adapter mes div, à cette heure-ci, je me prends la tête avec une adaptation de la taille d'une image qui ne suit pas la taille de la div, de plus celle-ci a un effet de zoom.

Pouvez-vous m'aider en me mettant sur une piste, n'oubliez Pa que je suis débutant.
Je sais que le design n'est pas top, mais dans cet accueil, je voulais simplement réunir quelque effet pour montrer ce qu'il est possible de faire en html et ccs avec un minimum de java script.

Merci


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" >
    <link rel="stylesheet" href="style.css" >
</head>
<body>

    <header>
        <nav>
			<h1 class="logo">Survivre</h1>
			<div class="toggle">
                <i class="fas fa-bars ouvrir"></i>
                <i class="fas fa-times fermer"></i>
			</div>
            <ul class="menu">
                <li><a href="#">Acceuil</a></li>
                <li><a href="#">Edc N1</a></li>
                <li><a href="#">Edc n2</a></li>
                <li><a href="#">Edc n3</a></li>
            </ul>
        </nav>
    </header>

 <!-- Le reste du contenu -->
  <section class="section1">
    <div class="content">
     <h1 class="titre1"> La Survie Explication Simple et rapide </h1>
     <p class="paragraphe1">
      <mark class="opak">
        Bonjour à tous voici un peu de lecture pour remettre certaines idées reçues à leurs places. <br>
      <br>
      Tout d'abord, il faut bien comprendre que survie = danger , et pas n'importe lequel puisqu'il s'agit d'un danger de mort imminente. <br>
      <br>
      Une situation de survie peut arriver à tout moment sous diverses formes.
      </mark>
     </p>


     <p class="paragraphe1">
      <mark class="opak">
        Lorsque l’on sort de chez toi, on s’expose de suite à une possible situation d’urgence pour diverse cause possible, tels qu’une panne, perte de l’orientation, voir même une blessure.

        Ceci peut nous arriver aussi bien à pied, vélo, voiture, moto, quad, etc.
      </mark>
</p>
    </div>



  </section>

  <section class="section2">
    <h1 class="titre2"> Introduction </h1>
<div class="introduction">
  <p class="paragraphe2">
  Pour parer au mieux à une situation difficile, j’emporte mon sac à dos, qui est toujours à ma portée ou pas très loin de moi. <br>
<br>
  Celui-ci est composé de <strong> "divers Kit" </strong> pour parer à toute éventualité, ou au moins au mieux. <br>
<br>
<b> <u> Mon moyen mnémotechnique : </u> </b> <br>
<br>
Lorsque je pars, je dois <strong> "naviguer" </strong>, mais si j’ai un problème, je dois <strong> "communiquer" </strong> ma position et me <strong> "signaler" </strong>, si je suis blessé, je dois me <strong> "soigner" </strong> et de nuit <strong> "m’éclairer" </strong>. <br>
Si la situation perdure, je dois <strong> "Boire" </strong>, me <strong> "chauffer" </strong> et me <strong> "protéger" </strong> des éléments, et éventuellement <strong> "manger" </strong>. <br>
<br>
  </p>
</div>
</section>

<section class="section3">

  <div class="introduction2">
    <h2 class="soustitre">Les diffèrent éléments</h2>
    <p class="paragraphe3">
  - <strong> Naviguer </strong> <br>
  - <strong> Communiquer </strong> <br>
  - <strong> Signaler </strong> <br>
  - <strong> Soigner </strong> <br>
  - <strong> Eclairer </strong> <br>
  - <strong> Boire </strong> <br>
  - <strong> Chauffer </strong> <br>
  - <strong> Protéger </strong> <br>
  - <strong> Manger </strong> <br>
    </p>
  </div>
  
  <div class="zoom">
    <img src="frame/Image-Acceuil2.png" id="Image-Acceuil2" alt="Mon EDC Niveau 2">
    <img src="frame/Image-Acceuil2.png" id="imgZoom"  alt="Mon EDC Niveau 2">
</div>

</section>

<div class="floubtn">
    <br>
    <button class="btn1">Consulter</button>
    <br>
</div>

<section class="section4">
  <h1 class="titre2"> Validé W3C pour HTML5\CSS3 </h1>
<div>

<div class="conteneur">

  <div class="div4-1">
    <h2 class="soustitre2">HTML</h2>
      <a href="https://validator.w3.org/" onclick="window.open(this.href);return false">
        <img class="image-de-dessous" src="frame/htmllogo2.png"  alt="Validation html 5" >
		    <img id="image-de-dessushtml" src="frame/htmllogo1.png"  alt="Validation html 5" >
      </a>
  </div>

  <div class="div4-2">
		<h2 class="soustitre2">Version </h2>
			<hr class="hrh">
				<p  class="valid2">
					Réalisé par Bruno.H <br>
					<br>
					Mis à jour le 14 juillet 2023. <br>
				</p>
			<hr class="hr">
  </div>

  <div class="div4-3">
    <h2 class="soustitre2">css</h2>
      <a href="http://jigsaw.w3.org/css-validator/" onclick="window.open(this.href);return false">
        <img class="image-de-dessous" src="frame/csslogo2.png"  alt="Validation css 3" >
		    <img id="image-de-dessuscss" src="frame/csslogo1.png"  alt="Validation css 3" >
      </a>
  </div>

</div>

</div>
</section>

    <script src="toggle.js"></script>
    <script src="zoom.js"></script>
</body>
</html>


* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 16px;
}

body {
   font-family: sans-serif;
   background-image: url("frame/Image-Acceuil2.png"); /* image de fond  */
   background-position: 50%;/*  position image */
	background-size: 70%;/* taille image  */
	background-repeat: no-repeat;/* statut image  */
	background-color: black;/*  remplacement image */
	background-attachment: fixed;/*  effet sur image */
}

header {
   position: fixed;
   width: 100%;
   height: 100px;
   top: 0;
   left: 0;
   background-color: black;
   color: wheat;
   padding: 0 20px 0 0;
   z-index: 40;
}

nav {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-between; /*   */
   align-items: center;
}

.logo {
   font-size: 50px; /* Taille ecriture liste */
   float: left; /* positionnement titre par apport liste */
   margin: 10px 0px 10px 30px;/* marge logo */
   color: wheat; /* couleur texte logo */
   border-radius: 100%; /* bordure logo */
   background-color: yellowgreen; /* couleur bordure logo */
   text-shadow: goldenrod 0.1em 0.1em 0.2em;  /* ombre texte menu */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte menu */
}

.toggle {
   display: none;
	top: 0px;
   left: 0px;
   color: wheat;
}

.menu { 
   display: flex;
   justify-content: space-between; /*   */
   align-items: center;
   font-size: 20px;
   list-style: none;
   width: 350px;
}

a {
   text-decoration: none;
   color: wheat ;
}

.menu li  {
   color: yellowgreen;
	transition-property: background-color, border; /*  transition */
	transition-duration: 0.5s; /* duree transition  */
}

.menu li :hover 
{
	font-size: 30px;
	color: red;
	background-color: yellowgreen;
	padding: 5px;
	text-shadow: black 0.1em 0.1em 0.2em;  /* ombre texte menu */
	box-shadow: black 0.05em 0.05em 0.5em;  /* ombre texte menu */
	border: 5px ridge goldenrod;
	border-radius: 10px;
}

/* Fin liens Menu  */

@media all and (max-width: 768px) { /* (max-width: 991px) */

    header {
        background: transparent;
    }

    .toggle {
        display: block;
        top: 10px;
        font-size: 2rem;
        cursor: pointer;
        position: relative;
        z-index: 20;
    }

    .logo {
        position: relative;
        top: 10px;
        z-index: 20;
        color: wheat;
    }

    .ouvrir {
        display: block;
        color: wheat;

    }

    .fermer {
        display: none;
        color: wheat;
    }

    .open .ouvrir {
        display: none;
    }

    .open .fermer {
        display: block;
    }

    .menu {
        position: absolute;
        top: 80px;
        right: 0%;
        width: 50%;
        height: auto;
        background: yellowgreen;
        flex-direction : column;

        text-shadow: black 0.1em 0.1em 0.2em;  /* ombre texte menu */
      	box-shadow: black 0.05em 0.05em 0.5em;  /* ombre texte menu */
      	border: 5px ridge goldenrod;
      	border-radius: 10px;
        
        padding: 2rem;
        justify-content: space-around;
        transform: translateX(100%);
        transition: transform 1s;
        z-index: 20;
    }

li a {
      text-decoration: none;
      color: red ;
      border: 5px ridge goldenrod;
      border-radius: 10px; 
   }

    .menu li {
        font-size: 2rem;
        margin: 15px 0 5px 0;
    }

    .open .menu {
        transform: translateX(0);
    }
}

/* ----------------------------------------------------- */

/* Debut Section commune */

section
{
   border: 10px ridge #404040; /* bordure des sections */
}

p
{
   font-size: 18px; /* Taille ecriture text */
   margin-left: 0px; /* espacement bord gauche text */
   margin-top: 0px; /* espacement bord haut text */
}

/* Fin Section commune */

/* ----------------------------------------------------- */

/* Section 1  */

.titre1
{
   margin-top: 100px; /* espacement bord haut titre1 */
   margin-bottom: 30px;
   margin-left: 0px; /* espacement bord gauche titre1 */
   color: wheat;
   text-shadow: goldenrod 0.4em 0.4em 1.0em;  /* ombre titre */
   text-align: center;
   font-size: 50px; /* Taille ecriture text */
}

.paragraphe1
{
   color: red;
   margin-top: 20px; /* espacement bord haut titre1 */
   margin-left: 50px; /* espacement bord haut titre1 */
   margin-right: 50px;
   font-size: 28px; /* Taille ecriture text */
}

.content
{
   height: auto ;
   backdrop-filter : blur(8px);
   padding-bottom: 30Px;
}

.opak
{
   opacity: 0.6; /* opacite du texte */
}

/* Section 1  */

/* ----------------------------------------------------- */

/* Section  2 Introduction */

.section2
{
   background-color: grey;
   height: auto;
}

.titre2
{
   margin-top: 40px; /* espacement bord haut titre1 */
   margin-bottom: 30px;
   margin-left: 0px; /* espacement bord gauche titre1 */
   background-color: #404040;
   color: yellowgreen;
   text-shadow: goldenrod 0.4em 0.4em 1.0em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* contour du texte */
         -webkit-text-stroke-color: grey; /* contour du texte */
   text-align: center;
   font-size: 50px; /* Taille ecriture text */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte sous titre */
}

.paragraphe2
{
   color: black;
   margin-top: 20px; /* espacement bord haut titre1 */
   margin-left: 30px; /* espacement bord haut titre1 */
   margin-right: 50px;
   font-size: 18px; /* Taille ecriture text */
}

/* Fin Section 2 Introduction */

/* ----------------------------------------------------- */

/*  Section 3 Les differents éléments */

.section3
{
   background-color: grey;
   height: 800px;
}

.introduction2
{
   width: 35%;
   float: left;
}

.paragraphe3
{
   color: black; 
   background-color: transparent;
   width:100%;
   height: 100%;
   padding-top: 30%;
   padding-left: 10%;
   font-size: 18px; /* Taille ecriture text */
   text-align: left;
}

.soustitre
{
   border-radius: 100%; /* bordure logo */
   background-color: #404040;
  
   margin: 10px 0px 5px 10px;/* marge sous titre */
   padding: 10px;
   width: 300px;
   color: wheat;
   text-shadow: yellowgreen 0.4em 0.4em 1.0em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* contour du texte */
         -webkit-text-stroke-color: grey; /* contour du texte */
   text-align: center;
   font-size: 40px; /* Taille ecriture text */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte sous titre */
}

/*  Fin Section 3 Les differents éléments */

/* ----------------------------------------------------- */

/*  Bouton Consulter */

.btn1
{
	display: block; /* centrer elements */
	margin-left: auto; /* centrer elements */
	margin-right: auto; /* centrer elements */
	padding-bottom: 10Px;
	height: 70px;
	width: 140px;
	font-size: 30px;
	background-color: yellowgreen;
	border-radius: 100%;
	color: red;
	text-shadow: black 0.2em 0.2em 0.4em;  /* ombre texte */
	box-shadow: 2px 2px 10px greenyellow, 0px 0px 30px grey; /* ombre bouton */
}

.btn1:hover 
{ 
   background-color: yellow; 
   text-shadow: black 0.1em 0.1em 0.2em;  /* ombre texte menu */
   box-shadow: goldenrod 0.05em 0.05em 0.5em;  /* ombre texte menu */
   transition-property: background-color, border;
   transition-duration:2s;
}

.floubtn
{
   backdrop-filter : blur(10px);
}

/*  Fin Bouton Consulter */

/* ----------------------------------------------------- */

/* Section 4 Validation Html/Css  */

.section4
{
   background-color: gray;
   height: auto;

}

.conteneur
{
   position:relative;
	height:485px;
	width:auto;
	margin:10px auto;
   display: flex;
}

.div4-1
{
   background-color: transparent;
   width: 33% ;
   height: 300px;
}

.div4-2
{
   background-color: transparent;
   width: 34% ;
   height: 300px;
}

.div4-3
{
   background-color: transparent;
   width: 33% ;
   height: 300px;
}

/* Debut Image HTML CSS */

.div4-1 img 
{
	transition: all 1s ease;
}

.conteneur img#image-de-dessushtml 
{
	transform:scale(1,0);
	opacity:0;
}

.conteneur img#image-de-dessuscss 
{
	transform:scale(1,0);
	opacity:0;
}

.div4-1:hover img#image-de-dessushtml 
{
	opacity:1;
	transform:scale(1,1);
}

.div4-1:hover img#image-de-dessuscss 
{
	opacity:1;
	transform:scale(1,1);
}

.div4-1:hover img.image-de-dessous 
{
	transform:rotate(360deg) scale(0,0);
}

.div4-3 img 
{
	transition: all 1s ease;
}

.div4-3:hover img#image-de-dessushtml 
{
	opacity:1;
	transform:scale(1,1);
}

.div4-3:hover img#image-de-dessuscss 
{
	opacity:1;
	transform:scale(1,1);
}

.div4-3:hover img.image-de-dessous 
{
	transform:rotate(360deg) scale(0,0);
}

.image-de-dessous
{
   width: 100%; 
   margin-top: 20px; 
}

 #image-de-dessushtml /*#image-de-dessus*/
{
   width: 30%; 
   position:absolute;
   top: 100px;
   left: 0px;
}

#image-de-dessuscss /*#image-de-dessus*/
{
   width: 30%; 
   position:absolute;
   top: 100px;
   right: 0px;
}

.div4-3 .image-de-dessous
{
   width: 100%; 
   top: 0px;
   left: 200px;
}

/* Fin Image HTML CSS  */

/* Debut sous titre 2  */

.soustitre2
{
   text-align: center;
   border-radius: 100%; /* bordure logo */
   background-color: #404040;
   margin: 10px auto;/* marge sous titre */
   padding: 10px;
   width: 200px;
   color: wheat;
   text-shadow: yellowgreen 0.4em 0.4em 1.0em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* taille contour du texte */
         -webkit-text-stroke-color: rgb(196, 129, 129); /* couleur contour du texte */
   font-size: 40px; /* Taille ecriture text */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte sous div */
}



/* Fin sous titre 2  */

/* Debut Texte Version  */

p.valid2
{ 
	
	margin: 35px 0;
	background-color: transparent;
	position: relative;
	top:-0px;
	width: 100%;
 	height: auto;
   text-align: center;
   font-size: 20px;
   font-weight: bold;
   color: rgb(59, 9, 9);
   transition: transform 1s;
}

p.valid2:hover
{


	padding: 20px;
	margin: 35px 0;
   background-color: gray;
   text-align: center; /*   positionnement du texte*/
   font-size: 30px; /*   talle du texte*/
   font-weight: bold; /*  epaisseur texte */
   color: wheat; /*  Couleur texte */
   text-shadow: rgb(66, 64, 64) 0.1em 0.1em 0.1em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* Talle du contour du texte */
         -webkit-text-stroke-color: rgb(185, 100, 100); /* Couleur contour du texte */
         transform: scale(1.6);
         box-shadow: black 0.1em 0.1em 0.3em; ; /* Bordure boite  */
         z-index: 9; /* Permet de mettre en premier plan la div  */
         position: relative;/* Toujours utiliser avec z-index  */
}

.hrh
{
   width:100%; 
   color:firebrick; 
   background-color:firebrick; 
   height:3px; 
   padding: 0px 0px;
   margin:100px 0 0 0; 
   box-shadow:8px 6px 9px #7F7F7F; /* bordure boite */
}

.hr
{
   width:100%; 
   color:firebrick; 
   background-color:firebrick; 
   height:3px; 
   padding: 0px 0px;
   margin:30px 0 0 0; 
   box-shadow:8px 6px 9px #7F7F7F; /* bordure boite */
}

/* Debut Zoom Acceuil  */

.zoom#Image-Acceuil2
{
   width: 35%;
   background-color:yellow;
   padding-top: 100px;
}

.zoom{
   width: max-content;
   position: relative;
   right: 150px;
}

.zoom img{
   width:30%;
   padding-top: 100px;
}

#imgZoom{
   background-color: transparent;
   position: absolute;
   right: 700px;
   top: 0;
   --zoom-x: 50%;
   --zoom-y: 50%;
   transform: scale(1.5);
   pointer-events: none;
   clip-path: circle(
   100px at var(--zoom-x) var(--zoom-y)
   );
   opacity: 1;
}

/* Fin Zoom Acceuil  */

/* ----------------------------------------------------- */


let zoom = document.querySelector('.zoom');
let imgZoom = document.getElementById('imgZoom');

zoom.addEventListener('mousemove', (event)=>{
    imgZoom.style.opacity = 1;
    let positionPx = event.x - zoom.getBoundingClientRect().left;
    let positionX = (positionPx / zoom.offsetWidth) * 130;

    let positionPy = event.y - zoom.getBoundingClientRect().top;
    let positionY = (positionPy / zoom.offsetHeight) * 100;

    imgZoom.style.setProperty('--zoom-x', positionX + '%');
    imgZoom.style.setProperty('--zoom-y', positionY + '%');

    let transformX = -(positionX - 30) / 5.5;
    let transformY = - (positionY - 50) / 5.5;
    imgZoom.style.transform = `scale(1.5) translateX(${transformX}%) 
                                          translateY(${transformY}%)`;
})
zoom.addEventListener('mouseout', ()=>{
    imgZoom.style.opacity = 0;
})

parsimonhi

Modérateur

24 Jul 2023 à 09:31

Bonjour,

Le cahier des charges est imprécis.

De quelle image s'agit-il ?

Quelle est l'effet désiré, et à la suite de quelle action de l'utilisateur ?

Amicalement,

Prévenir un modérateur

Répondre au sujet

Questions générales et questions de débutants

Probleme adaptation image