Comment redimensionner une image pour qu'elle tienne dans la fenêtre du navigateur ?

Question

Comment redimensionner une image pour qu'elle tienne dans la fenêtre du navigateur ?

Demandé el 29 de Mai, 2011: Quand la question a-t-elle été
600920 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cela semble trivial, mais après toutes les recherches et le codage, je n'arrive pas à le faire fonctionner. Les conditions sont les suivantes

La taille de la fenêtre du navigateur est inconnue. Ne proposez donc pas de solution impliquant des tailles de pixels absolues.
Les dimensions originales de l'image sont inconnues et peuvent ou non correspondre à la fenêtre du navigateur.
L'image est centrée verticalement et horizontalement.
Les proportions de l'image doivent être conservées.
L'image doit être affichée dans son intégralité dans la fenêtre (pas de recadrage).
Je ne souhaite pas que des barres de défilement apparaissent (et elles ne devraient pas apparaître si l'image est adaptée).
L'image se redimensionne automatiquement lorsque les dimensions de la fenêtre changent, afin d'occuper tout l'espace disponible sans être plus grande que sa taille d'origine.

En fait, ce que je veux, c'est ceci :

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

Le problème du code ci-dessus est qu'il ne fonctionne pas : l'image prend tout l'espace vertical dont elle a besoin en ajoutant une barre de défilement verticale.

J'ai à ma disposition PHP, Javascript, JQuery mais je tuerais pour une solution CSS uniquement. Je me fiche que cela ne fonctionne pas dans IE.

Demandé el 29 de Mai, 2011 par sebnukem

Answer 1

5 Réponses

Answer 2

184voto

sebnukem Points 432

Mise à jour 2018-04-11

Voici une version sans Javascript, CSS uniquement solution. L'image sera dynamiquement centrée et redimensionnée pour s'adapter à la fenêtre.

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html>

L'[autre, ancienne] solution, qui utilise JQuery, définit la hauteur du conteneur de l'image ( body dans l'exemple ci-dessous) de sorte que le max-height sur l'image fonctionne comme prévu. L'image sera également redimensionnée automatiquement lorsque la fenêtre du client sera redimensionnée.

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit { /* set relative picture size */
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html>

Note : L'utilisateur gutierrezalex a présenté une solution très similaire sous la forme d'un plugin JQuery sur cette page.

Répondu el 4 de Février, 2013 par sebnukem (432 Points )

Answer 3

68voto

Neolisk Points 12089

Voici une solution simple, basée uniquement sur les feuilles de style CSS ( JSFiddle ), fonctionne partout, mobile et IE inclus :

CSS 2.0 :

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

HTML :

<body>
  <img src="images/your-image.png" />
</body>

Répondu el 11 de Février, 2016 par Neolisk (12089 Points )

Answer 4

34voto

Max Points 3568

CSS3 introduit de nouvelles unités qui sont mesurées par rapport à la fenêtre (viewport), qui est la fenêtre dans ce cas. Ces unités sont les suivantes vh y vw qui mesurent respectivement la hauteur et la largeur de la fenêtre. Voici une solution simple en CSS :

img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

Le seul bémol est que cela ne fonctionne que s'il n'y a pas d'autres éléments contribuant à la hauteur sur la page.

Répondu el 27 de Septembre, 2016 par Max (3568 Points )

Answer 5

17voto

mehaase Points 6824

Si vous souhaitez placer un élément conteneur autour de votre image, une solution CSS pure est simple. En effet, la hauteur de 99 % n'a aucune signification lorsque l'élément parent s'étend verticalement pour contenir ses enfants. Le parent doit avoir une hauteur fixe, disons... la hauteur de la fenêtre de visualisation.

HTML

<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
    <img class='make-it-fit' 
         src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

CSS

div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}

img.make-it-fit {
    max-width: 99%;
    max-height: 99%;
}

Jouer avec le violon .

Répondu el 3 de Octobre, 2015 par mehaase (6824 Points )

Answer 6

15voto

gutierrezalex Points 721

Le présent pourrait être ce que vous recherchez.

Il suffit de consulter la source. Je n'ai pas testé cette fonction sur des écrans plus grands - j'ai besoin d'une hauteur maximale.

Répondu el 29 de Mai, 2011 par gutierrezalex (721 Points )

Comment redimensionner une image pour qu'elle tienne dans la fenêtre du navigateur ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment redimensionner une image pour qu'elle tienne dans la fenêtre du navigateur ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: