Come ridimensionare un'immagine per adattarla alla finestra del browser?

114

Sembra banale ma dopo tutta la ricerca e la codifica non riesco a farlo funzionare. Le condizioni sono:

  1. La dimensione della finestra del browser è sconosciuta. Quindi, per favore, non proporre una soluzione che coinvolga dimensioni pixel assolute.
  2. Le dimensioni originali dell'immagine sono sconosciute e possono o non possono già adattarsi alla finestra del browser.
  3. L'immagine è centrata verticalmente e orizzontalmente.
  4. Le proporzioni dell'immagine devono essere conservate.
  5. L'immagine deve essere visualizzata nella sua interezza nella finestra (nessun ritaglio).
  6. Non desidero che appaiano le barre di scorrimento (e non dovrebbero se l'immagine si adatta.)
  7. L'immagine si ridimensiona automaticamente quando cambiano le dimensioni della finestra, per occupare tutto lo spazio disponibile senza essere più grande della sua dimensione originale.

Fondamentalmente quello che voglio è questo:

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

Il problema con il codice sopra è che non funziona: l'immagine occupa tutto lo spazio verticale di cui ha bisogno aggiungendo una barra di scorrimento verticale.

A mia disposizione c'è PHP, Javascript, JQuery ma ucciderei per una soluzione solo CSS. Non mi interessa se non funziona in IE.

html  css 
— sebnukem
fonte
perraultarchitecte.com/en/projects/… Questo è l'effetto che vuoi, giusto? anch'io!
1
sì. La soluzione che ho pubblicato sopra funziona. Puoi vedere il risultato su eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— sebnukem
Grazie, mi aiuta davvero. Qualche suggerimento su cosa potrei fare per posizionare due immagini fianco a fianco, mantenendo la funzionalità di ridimensionamento? Grazie.
9
Mi piace il tuo "non requisito": "Non mi interessa se non funziona in IE". :)
— Bastian

Risposte:

122

Aggiornamento 2018-04-11

Ecco una soluzione senza Javascript, solo CSS . L'immagine verrà centrata e ridimensionata dinamicamente per adattarsi alla finestra.

<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 [altra, vecchia] soluzione, utilizzando JQuery, imposta l'altezza del contenitore dell'immagine ( bodynell'esempio sotto) in modo che la max-heightproprietà sull'immagine funzioni come previsto. L'immagine si ridimensionerà automaticamente anche quando la finestra del client viene ridimensionata.

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

Nota: l'utente gutierrezalex ha confezionato una soluzione molto simile come plug-in JQuery in questa pagina.

— sebnukem
fonte
6
Non c'è bisogno di JS, c'è solo una soluzione CSS .
— Neolisk,
Anche senza JS, in alternativa usa flexbox
— Jason Sturges
51

Ecco una semplice soluzione solo CSS ( JSFiddle ), funziona ovunque, mobile e IE incluso:

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
fonte
2
Bello. Ma non è centrato verticalmente.
— sebnukem
1
@sebnukem: Doveva essere? In qualche modo mi mancava questo nei requisiti. Ecco perché le persone usano screenshot / mockup. :) PS Non credo che nessuna delle risposte fornite lo renda centrato verticalmente, anche con l'aiuto di JS.
— Neolisk
3
Ho provato molte soluzioni là fuori, anche soluzioni da css-tricks. Il tuo funziona perfettamente come un fascino!
— Stephan
2
La migliore soluzione in assoluto!
— iVela
24

CSS3 introduce nuove unità che vengono misurate rispetto al viewport, che in questo caso è la finestra. Questi sono vhe vw, che misurano rispettivamente l'altezza e la larghezza della finestra. Ecco una semplice soluzione solo CSS:

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

L'unico avvertimento è che funziona solo se non ci sono altri elementi che contribuiscono all'altezza sulla pagina.

— Max
fonte
Grazie, fantastico. C'è qualche motivo per cui l'immagine 100vhnon si adatta ma 97vhfunziona bene?
— Pavel
Forse hai altre immagini che contribuiscono all'altezza, come il margine e l'imbottitura sul corpo? vhletteralmente significa l'altezza della visualizzazione, quindi se altri elementi aggiungono altezza alla tua pagina, l'intera pagina sarà> 100 vh. Ha senso?
— Max
Grazie, ora risolto. Se qualcuno ha lo stesso problema (il .svgfile viene visualizzato bene, ma rinominarlo in .htmlcausa inesattezza): il browser aggiunge automaticamente il <body>tag con l'impostazione predefinita margin:8anche se il file non ha <body>tag. Quindi la soluzione sta aggiungendo<style>body{margin:0}</style>
— Pavel
15

Se sei disposto a inserire un elemento contenitore attorno alla tua immagine, una soluzione CSS pura è semplice. Vedi, l'altezza del 99% non ha significato quando l'elemento genitore si estenderà verticalmente per contenere i suoi figli. Il genitore deve avere un'altezza fissa, diciamo ... l'altezza del viewport.

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

Gioca con il violino .

— Mark E. Haase
fonte
Puoi farlo con un <div>invece di un <img>?
— StevoHN
@sebnukem Non avevo notato prima questo requisito. Ho aggiornato la mia risposta.
— Mark E. Haase
Questo non massimizza l'altezza della mia immagine ampia.
— Sridhar Sarnobat
4

Ridimensiona l'immagine per adattarla allo schermo dal lato più lungo mantenendo le sue proporzioni

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

  • width: 100vw - la larghezza dell'immagine sarà il 100% della porta di visualizzazione

  • height: auto - l'altezza dell'immagine verrà scalata proporzionalmente

  • max-height: 100vw - se l'altezza dell'immagine diventasse superiore alla porta di visualizzazione verrà ridotta per adattarsi allo schermo, di conseguenza la larghezza dell'immagine verrà ridotta a causa della seguente proprietà

  • object-fit: contain - il contenuto sostituito viene ridimensionato per mantenere le sue proporzioni mentre si adatta alla casella del contenuto dell'elemento

    Nota: object-fitè completamente supportato solo da IE 16.0

— am0wa
fonte
1
Come quella soluzione, tuttavia, dovresti menzionare che l'adattamento agli oggetti non è compatibile con IE11 che è ancora ampiamente utilizzato sfortunatamente.
— Blackbam
@DivijSehgal quindi non ti serve object-fito potresti usare esplicitamente object-fit: fill;quale è l' impostazione predefinita .
— am0wa
E se volessimo centrare verticalmente?
— Fmstrat
E se volessimo centrare verticalmente? Basta aggiungere: margin: auto;
— cat
La soluzione funziona insieme a html e body style da un'altra risposta: html, body {width: 100%; altezza: 100%; margine: 0; imbottitura: 0; }
— Ivan Kovtun
3

La mia regola CSS pigra generale:

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

Questo potrebbe ingrandire l'immagine se all'inizio è a bassa risoluzione (ciò ha a che fare con la qualità dell'immagine e le dimensioni delle dimensioni. Per centrare l'immagine, puoi anche provare (nel CSS)

display:block;    
margin: auto 0;

per centrare la tua immagine

nel tuo HTML:

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

So che ci sono già alcune risposte qui, ma ecco cosa ho usato:

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
— TomC
fonte
Non ho idea del perché, ma funziona a meraviglia. Mi piacerebbe una spiegazione!
— SeedyROM
Nemmeno io, ma è quello che ho trovato dopo molte ricerche.
— TomC
2

Avevo un requisito simile e dovevo farlo con CSS e JavaScript di base. Nessun JQuery disponibile.

Questo è quello che ho ottenuto lavorando. 

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

Nota: non ho usato il 100% per la larghezza dell'immagine poiché c'era sempre un po 'di riempimento da considerare.

— Rohit Vipin Mathews
fonte
2
Con CSS 3 otteniamo le unità "vh" e "vw" che sono rispettivamente la percentuale di altezza della vista e la percentuale di larghezza della vista. semplicemente img {max-width: 95vw; max-height: 95vh;} potrebbe essere sufficiente.
— bobpaul
Se riesci a sommarlo come risposta, potrebbe essere utile per chiunque venga a questo in seguito.
— Rohit Vipin Mathews
Puoi anche impilare più immagini nell'area visualizzabile. Per due immagini, inserisci due imgtag nella parte inferiore bodydella pagina e impostali max-heightsu 49vh. La visualizzazione di più di due immagini nell'area visualizzabile è lasciata come esercizio per il lettore.
— Andrew Beals
2

Falla semplice. Grazie

.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>
Espandi lo snippet

— Hassan Siddiqui
fonte
Grazie! semplicemente aggiungendo style = "height: 80vh;" nel tag immagine ha fatto il trucco per me.
— Tobias J.
1 
width: 100%;
overflow: hidden;

Credo che dovrebbe fare il trucco.

— RobinJ
fonte
Ciao, grazie per la tua risposta, ma non funziona e non può funzionare logicamente quando l'altezza dell'immagine è maggiore della finestra.
— sebnukem
1
Beh ... cosa intendi fare? Vuoi allungarlo? O le proporzioni originali dovrebbero essere lasciate intatte (presumo che questo sia quello che vuoi)?
— RobinJ
1

Basandosi sulla risposta di @ Rohit, questo risolve i problemi segnalati da Chrome, ridimensiona in modo affidabile le immagini e funziona anche per più immagini che sono impilate verticalmente, ad es. <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> C'è probabilmente un modo più elegante per farlo. 

<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>
Espandi lo snippet

— Andrew Beals
fonte
0

Usa questo codice nel tuo tag di stile

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
— vaibhav khunt
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.