18092 sujets

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

Agrandir une image par la molette sans limite de taille du parent

Bonjour,

Peut-être la question la plus bête du mois.

Par quelle miracle serait possible que le zoom avant sur une image fasse grandir l'image sans être limité par la taille de son parent ?

Une image dans ce codepen, elle provient d'un codepen de gcyrillus, alertez-moi si souci.
Modérateur
Salut,
Je ne comprends pas bien ta question.
Sur une base simple, tu as besoin de 2 choses :
- l'event wheel
- la propriété transform scale

index.html : 

<!doctype html>
<html lang="fr">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Titre du document</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation-float.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation-prototype.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation-rtl.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <main class="grid-container margin-top-3">
            <div class="wrap">
                <img src="https://dummyimage.com/400x300/abc" alt="">
            </div>
        </main>
        <script src="app.js"></script>
    </body>

</html>


styles.css : 

.wrap{
    overflow: hidden;
    border: 1px solid red;
    display: inline-block;

    img{
        transition: transform 100ms;
    }
}

* si besoin, tu supprimes la règle : overflow hidden.

app.js : 

(()=>{
    const wrap = document.querySelector('.wrap')
    const img = wrap.querySelector('img')
    let currentScale = 1
    wrap.addEventListener('wheel', e => {
        e.preventDefault()
        const MIN_SCALE = 0.1
        const MAX_SCALE = 5

        let zoomStep = e.deltaY / 500
        currentScale -= zoomStep
        
        if (currentScale < MIN_SCALE) {
            currentScale = MIN_SCALE
        }else if(currentScale > MAX_SCALE){
            currentScale = MAX_SCALE
        }
        
        img.style.transform = `scale(${currentScale.toFixed(3)})`
    })
})()

Modifié par Niuxe (03 Oct 2025 - 01:47)
Prévenir un modérateur
Répondre au sujet
Aller à