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:

La taille de la fenêtre du navigateur est inconnue. Ne proposez donc pas de solution impliquant des tailles de pixels absolues.
Les dimensions d'origine de l'image sont inconnues et peuvent ou non correspondre déjà à 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 les barres de défilement apparaissent (et elles ne devraient pas si l'image correspond.)
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
la 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

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
la source

6

Pas besoin de JS, il existe une solution uniquement CSS .

Neolisk

Aussi sans JS, utilisez également flexbox

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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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

html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}

Ou peut-être vérifier ceci: http://css-tricks.com/how-to-resizeable-background-image/

Anze Jarni
la source

2

Cela rogne l'image, donc ce n'est pas acceptable. Merci d'avoir répondu.

sebnukem

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
la 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
la source

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

Réponses: