Comment redimensionner une image pour l'adapter à la fenêtre du navigateur?

114

Cela semble trivial, mais après toutes les recherches et le codage, je ne peux pas le faire fonctionner. Les conditions sont:

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

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

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

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

A ma disposition se trouvent PHP, Javascript, JQuery mais je tuerais pour une solution CSS uniquement. Je m'en fiche si cela ne fonctionne pas dans IE.

html  css 
— Sebnukem
source
perraultarchitecte.com/en/projects/… C'est l'effet que vous voulez, non? moi aussi!
1
Oui, ça l'est. La solution que j'ai publiée ci-dessus fonctionne. Vous pouvez voir le résultat sur eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— sebnukem
Merci, cela m'aide vraiment. Des suggestions que je pourrais faire pour placer deux images côte à côte, en conservant la fonctionnalité de redimensionnement? Je vous remercie.
9
J'aime votre "non-exigence": "Je m'en fiche si cela ne fonctionne pas dans IE." :)
— Bastian

Réponses:

122

Mise à jour 11/04/2018

Voici une solution sans Javascript et uniquement CSS . 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>

La solution [other, old], à l'aide de JQuery, définit la hauteur du conteneur d'image ( bodydans l'exemple ci-dessous) afin que la max-heightpropriété de l'image fonctionne comme prévu. L'image sera également automatiquement redimensionnée lorsque la fenêtre du client est 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>

Remarque: l'utilisateur gutierrezalex a présenté une solution très similaire à celle d'un plugin JQuery sur cette page.

— Sebnukem
source
6
— Neolisk
— Jason Sturges
51

Voici une solution simple CSS uniquement ( 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>
— Neolisk
source
2
Agréable. Mais ce n'est pas centré verticalement.
— sebnukem
1
@sebnukem: Était-ce censé l'être? D'une manière ou d'une autre, j'ai manqué cela dans les exigences. C'est pourquoi les gens utilisent des captures d'écran / des maquettes. :) PS Je ne pense pas qu'aucune des réponses fournies soit centrée verticalement, même avec l'aide de JS.
— Neolisk
3
J'ai essayé de nombreuses solutions, même des solutions de css-tricks. Le vôtre fonctionne parfaitement comme un charme!
— Stephan
2
La meilleure solution jamais!
— iVela
24

CSS3 introduit de nouvelles unités qui sont mesurées par rapport à la fenêtre, qui est la fenêtre dans ce cas. Ce sont vhet vw, qui mesurent respectivement la hauteur et la largeur de la fenêtre. Voici une solution simple CSS uniquement:

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

La seule mise en garde à cela est que cela ne fonctionne que s'il n'y a pas d'autres éléments contribuant à la hauteur sur la page.

— Max
source
Merci, c'est super. Est-ce une raison pour laquelle l' 100vhimage ne rentre pas mais 97vhfonctionne bien?
— Pavel
Peut-être avez-vous d'autres images contribuant à la hauteur, telles que la marge et le rembourrage sur le corps? vhsignifie littéralement la hauteur de la vue, donc si d'autres éléments ajoutent de la hauteur à votre page, la page entière sera> 100vh. Cela a-t-il du sens?
— Max
Merci, résolu maintenant. Si quelqu'un a le même problème (le .svgfichier se rend bien, mais le renommer en .htmlcause une inexactitude): le navigateur ajoute automatiquement la <body>balise avec la valeur par défaut margin:8même si le fichier n'a pas de <body>balise. Donc, la solution ajoute<style>body{margin:0}</style>
— Pavel
15

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

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%;
}

Jouez avec le violon .

— Mark E. Haase
source
Pouvez-vous faire cela avec un <div>au lieu d'un <img>?
— StevoHN
@sebnukem Je n'avais pas remarqué cette exigence auparavant. J'ai mis à jour ma réponse.
— Mark E. Haase
Cela ne maximise pas la hauteur de ma large image.
— Sridhar Sarnobat
4

Redimensionner l'image pour l'adapter à l'écran du côté le plus long en conservant son rapport hauteur / largeur

img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}

  • width: 100vw - la largeur de l'image sera de 100% du port de vue

  • height: auto - la hauteur de l'image sera mise à l'échelle proportionnellement

  • max-height: 100vw - si la hauteur de l'image devenait supérieure au port de vue, elle sera réduite pour s'adapter à l'écran, par conséquent la largeur de l'image sera diminuée en raison de la propriété suivante

  • object-fit: contain - le contenu remplacé est mis à l'échelle pour conserver ses proportions tout en s'adaptant à la zone de contenu de l'élément

    Remarque: object-fitest entièrement pris en charge uniquement depuis IE 16.0

— am0wa
source
1
Cependant, comme cette solution, vous devez mentionner que l'adaptation d'objet n'est pas compatible avec IE11 qui est encore largement utilisé malheureusement.
— Blackbam
@DivijSehgal alors vous n'avez pas besoin object-fitou vous pouvez explicitement utiliser object-fit: fill;ce qui est par défaut .
— am0wa
Et si nous voulons centrer verticalement?
— Fmstrat
Et si nous voulons centrer verticalement? Ajoutez simplement: margin: auto;
— chat
La solution fonctionne avec le html et le style de corps d'une autre réponse: html, body {width: 100%; hauteur: 100%; marge: 0; rembourrage: 0; }
— Ivan Kovtun
3

Ma règle CSS paresseuse générale:

.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

Cela peut faire un zoom avant sur votre image si elle est en basse résolution pour commencer (c'est à voir avec la qualité de votre image et la taille en dimensions. Pour centrer votre image, vous pouvez également essayer (dans le CSS)

display:block;    
margin: auto 0;

pour centrer votre image

dans votre HTML:

<div class="background"></div>
— usrrname
source
3

Je sais qu'il y a déjà quelques réponses ici, mais voici ce que j'ai utilisé:

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
— TomC
source
Je ne sais pas pourquoi, mais cela fonctionne comme un charme. J'adorerais une explication!
— SeedyROM
Moi non plus, mais c'est ce que j'ai trouvé après de nombreuses recherches.
— TomC
2

J'avais une exigence similaire, et je devais le faire en CSS et JavaScript de base. Aucun JQuery disponible.

C'est ce que j'ai travaillé. 

<html>
      <head>
            <style>
                   img {
                          max-width: 95% !important;
                          max-height: 95% !important;
                       }
            </style>
            <script>
                   function FitImagesToScreen() {
                      var images = document.getElementsByTagName('img');
                      if(images.length > 0){
                         for(var i=0; i < images.length; i++){
                             if(images[i].width >= (window.innerWidth - 10)){
                                 images[i].style.width = 'auto';
                               }
                            }
                         }
                   }
             </script>
      </head>
      <body onload='FitImagesToScreen()'>
      ----    
      </body>
</html>

Remarque: je n'ai pas utilisé 100% pour la largeur de l'image car il y avait toujours un peu de remplissage à prendre en compte.

— Rohit Vipin Mathews
source
2
Avec CSS 3, nous obtenons les unités "vh" et "vw" qui sont respectivement le pourcentage de hauteur de la fenêtre et le pourcentage de largeur de la fenêtre. simplement img {largeur max: 95vw; max-height: 95vh;} pourrait être suffisant.
— bobpaul
Si vous pouvez l'ajouter en tant que réponse, cela pourrait être utile pour quiconque y reviendra plus tard.
— Rohit Vipin Mathews
Vous pouvez également empiler plusieurs images dans la zone visible. Pour deux images, placez deux imgbalises dans le bodyde la page et définissez max-heightsur 49vh. L'affichage de plus de deux images dans la zone de visualisation est laissé comme un exercice pour le lecteur.
— Andrew Beals
2

Faites simple. Merci

.bg {
  background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}
<div class="bg"></div>
Développer l'extrait

— Hassan Siddiqui
source
Merci! juste en ajoutant style = "height: 80vh;" dans la balise d'image a fait l'affaire pour moi.
— Tobias J.
1 
width: 100%;
overflow: hidden;

Je pense que cela devrait faire l'affaire.

— RobinJ
source
Bonjour, merci pour votre réponse, mais cela ne fonctionne pas et ne peut pas logiquement fonctionner lorsque la hauteur de l'image est supérieure à la fenêtre.
— sebnukem
1
Eh bien ... qu'est-ce que vous comptez faire? Voulez-vous l'étirer? Ou faut-il laisser les proportions originales intactes (je suppose que c'est ce que vous voulez)?
— RobinJ
1

En s'appuyant sur la réponse de @ Rohit, cela corrige les problèmes signalés par Chrome, redimensionne de manière fiable les images et fonctionne également pour plusieurs images empilées verticalement, par exemple, <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> il existe probablement une manière plus élégante de le faire. 

<style>
    img {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
</style>
<script>
    function FitImagesToScreen() {
        var images = document.getElementsByTagName('img');
        if(images.length > 0){
            document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
            for(var i=0; i < images.length; i++){
                if(images[i].width >= (window.innerWidth - 10)){
                    images[i].style.width = 'auto';
                }
            }
        }
    }
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>
Développer l'extrait

— Andrew Beals
source
0

Utilisez ce code dans votre balise de style

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
— vaibhav khunt
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.