wake-up-neo.net

Come si ridimensiona automaticamente un'immagine per adattarsi a un contenitore 'div'?

Come si ridimensiona automaticamente un'immagine grande in modo che si adatti a un contenitore div più piccolo mantenendo la larghezza: rapporto altezza?


Esempio: stackoverflow.com: quando un'immagine viene inserita nel pannello dell'editor e l'immagine è troppo grande per adattarsi alla pagina, l'immagine viene automaticamente ridimensionata.

1268
001

Non applicare una larghezza o altezza esplicita al tag immagine. Invece, dagli:

max-width:100%;
max-height:100%;

Inoltre, height: auto; se si desidera specificare solo una larghezza.

Esempio: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
1634
Kevin

object-fit

Si scopre che c'è un altro modo per farlo.

<img style='height: 100%; width: 100%; object-fit: contain'/>

farà il lavoro. È roba CSS 3.

Fiddle: http://jsfiddle.net/mbHB4/7364/

313
Shih-Min Lee

Attualmente non esiste un modo per farlo correttamente in modo deterministico, con immagini a dimensione fissa come file JPEG o PNG.

Per ridimensionare un'immagine in modo proporzionale, devi impostare o l'altezza o la larghezza su "100%", ma non su entrambi. Se si imposta sia su "100%", l'immagine verrà allungata.

Scegliere se eseguire altezza o larghezza dipende dall'immagine e dalle dimensioni del contenitore:

  1. Se la tua immagine e il contenitore sono sia "a forma di ritratto" o entrambi "a forma di paesaggio" (più alti di quanto siano larghi, o più larghi di quelli alti, rispettivamente), allora non importa quale altezza o larghezza siano "% 100" .
  2. Se l'immagine è verticale e il contenitore è orizzontale, è necessario impostare height="100%" sull'immagine.
  3. Se l'immagine è orizzontale e il contenitore è ritratto, è necessario impostare width="100%" sull'immagine.

Se la tua immagine è un SVG, che è un formato di immagine vettoriale di dimensioni variabili, puoi fare in modo che l'espansione per adattare il contenitore avvenga automaticamente.

Devi solo assicurarti che il file SVG non abbia nessuna di queste proprietà impostata nel tag <svg>:

height
width
viewbox

La maggior parte dei programmi di disegno vettoriale là fuori imposterà queste proprietà quando si esporta un file SVG, quindi sarà necessario modificare manualmente il file ogni volta che si esporta o scrivere uno script per farlo.

96
Neil

Ecco una soluzione che allineerà sia verticalmente che orizzontalmente la tua img all'interno di un div senza alcun allungamento anche se l'immagine fornita è troppo piccola o troppo grande per essere inserita nel div.

Il contenuto HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

Il contenuto CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

La parte jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }
68
Humble Rumble

Rendilo semplice!

Dare al contenitore un fixed height e quindi per il tag img al suo interno, impostare width e max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

La differenza è che imposti width come 100%, non come max-width.

40
Mehdi Maghrooni

Controlla la mia soluzione: http://codepen.io/petethepig/pen/dvFsA

È scritto in puro CSS, senza alcun codice JavaScript. Può gestire immagini di qualsiasi dimensione e qualsiasi orientamento.

Dato questo HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

il codice CSS sarebbe:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}
21
dmitry

È possibile impostare l'immagine come sfondo per un div e quindi usare la proprietà CSS background-size :

background-size: cover;

"Ridimensiona l'immagine di sfondo per essere il più grande possibile in modo che l'area di sfondo sia completamente coperta dall'immagine di sfondo.Alcune parti dell'immagine di sfondo potrebbero non essere visibili nell'area di posizionamento dello sfondo" - - W3Schools

19
Chuck Dries

Ho appena pubblicato un plugin jQuery che fa esattamente ciò che ti serve con molte opzioni:

https://github.com/GestiXi/image-scale

Uso:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});
9
Nicolas BADIA

Questa soluzione non allunga l'immagine e riempie l'intero contenitore, ma taglia parte dell'immagine.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}
9
Miia Klingstedt

Il seguente funziona perfettamente per me:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}
7
Chong Lip Phang

Ho una soluzione molto migliore senza bisogno di JavaScript. È pienamente reattivo, e io lo uso molto. Spesso è necessario adattare un'immagine di qualsiasi rapporto aspetto ad un elemento contenitore con un rapporto aspetto specificato. E avere tutta questa cosa pienamente reattiva è un must.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

È possibile impostare la larghezza massima e l'altezza massima indipendentemente; l'immagine rispetterà la più piccola (in base ai valori e al rapporto di aspetto dell'immagine). È inoltre possibile impostare l'immagine per essere allineata come si desidera (ad esempio, per un'immagine di un prodotto su uno sfondo bianco infinito è possibile posizionarlo facilmente al centro della parte inferiore).

6
actimel

Devi dire al browser l'altezza di dove lo stai posizionando:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
5
Rick

Il codice di seguito è adattato da risposte precedenti e viene testato da me utilizzando un'immagine chiamata storm.jpg.

Questo è il codice HTML completo per una pagina semplice che visualizza l'immagine. Questo funziona perfettamente ed è stato testato da me con www.resizemybrowser.com. Inserisci il codice CSS nella parte superiore del codice HTML, sotto la sezione principale. Inserisci il codice dell'immagine ovunque desideri l'immagine.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>
5
dan

Ho centrato e ridimensionato proporzionalmente un'immagine all'interno di un collegamento ipertestuale sia in orizzontale che in verticale in questo modo:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

È stato testato su Internet Explorer, Firefox e Safari.

Ulteriori informazioni sul centraggio sono qui .

4
bancer
<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>
4
easd

Dare l'altezza e la larghezza necessarie per l'immagine al div che contiene il tag <img>. Non dimenticare di dare l'altezza/larghezza nel tag di stile appropriato.

Nel tag <img>, attribuisci il max-height e max-width al 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

È possibile aggiungere i dettagli nelle classi appropriate dopo averlo corretto.

4
AZD

Modifica: / Il posizionamento dell'immagine precedente basato sulla tabella aveva problemi in Internet Explorer 11 (max-height non funziona con elementi display:table). L'ho sostituito con il posizionamento in linea che funziona non solo in Internet Explorer 7 e Internet Explorer 11, ma richiede anche meno codice.


Ecco la mia opinione sull'argomento. Funzionerà solo se il contenitore ha una dimensione specificata (max-width e max-height non sembrano andare d'accordo con i contenitori che non hanno dimensioni concrete), ma ho scritto il contenuto CSS in un modo che consente di riutilizzarlo ( aggiungi classe picture-frame e px125 al tuo contenitore esistente).

In CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

E in HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}
<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Modifica: possibile ulteriore miglioramento utilizzando JavaScript (immagini di upscaling):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});
4
jahu

La risposta accettata da Thorn007 non funziona quando l'immagine è troppo piccola .

Per risolvere questo, ho aggiunto un fattore di scala . In questo modo, ingrandisce l'immagine e riempie il contenitore div.

Esempio:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-Origin:left top;" />
</div>

Gli appunti:

  1. Per WebKit devi aggiungere -webkit-transform:scale(4); -webkit-transform-Origin:left top; nello stile.
  2. Con un fattore di scala di 4, hai larghezza massima = 400/4 = 100 e altezza massima = 200/4 = 50
  3. Una soluzione alternativa è impostare la larghezza massima e l'altezza massima al 25%. È ancora più semplice.
4
user217447

Una soluzione semplice (correzione in 4 passaggi !!) che sembra funzionare per me, è qui sotto. L'esempio usa la larghezza per determinare la dimensione complessiva, ma puoi anche girarlo per usare l'altezza.

  1. Applica lo stile CSS al contenitore dell'immagine (ad esempio, <img>)
  2. Imposta la proprietà width sulla dimensione che desideri
    • Per le dimensioni, utilizza % per le dimensioni relative o la scalabilità automatica (in base al contenitore o alla visualizzazione delle immagini)
    • Utilizzare px (o altro) per una dimensione statica o impostata
  3. Imposta la proprietà height per la regolazione automatica in base alla larghezza
  4. GODERE!

Per esempio,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/Host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
2
young chisango

Tutte le risposte fornite, inclusa quella accettata, funzionano solo assumendo che il wrapper div abbia una dimensione fissa. Quindi questo è come farlo qualunque sia la dimensione del wrapper div è molto utile se sviluppi una pagina reattiva:

Scrivi queste dichiarazioni all'interno diDIVselector:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Quindi inserisci queste dichiarazioni all'interno diIMGselector:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

MOLTO IMPORTANTE:

Il valore di maxHeight deve essere il same per entrambi i selettoriDIVeIMG.

2
Billal Begueradj

Come ha risposto qui , puoi usare anche unità vh invece di max-height: 100% se non funziona sul tuo browser (come Chrome):

img {
    max-height: 75vh;
}
2
gaborous

Se utilizzi Bootstrap, devi solo aggiungere la classe img-responsive al tag img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Immagini Bootstrap

1
HoangYell

Ho risolto questo problema utilizzando il seguente codice:

<div class="container"><img src="image_url" /></div>
.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}
1
Serkan KONAKCI

Una soluzione semplice è usare flexbox. Definisci il CSS del contenitore per:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Regola la larghezza dell'immagine contenuta al 100% e dovresti ottenere un'immagine Nizza centrata nel contenitore con le dimensioni preservate.

1
Mateo Marin

Vedo che molte persone suggeriscono object-fit che è una buona opzione. Ma se vuoi lavorare in anche i browser più vecchi, c'è un altro modo per farlo facilmente.

Si prega di verificare la mia risposta qui: IE e Edge fix for object-fit: cover;

È abbastanza semplice. L'approccio che ho preso è stato quello di posizionare l'immagine all'interno del contenitore con assoluto e quindi posizionarlo esattamente al centro utilizzando la combinazione:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Una volta al centro, conferisco all'immagine,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Questo rende l'immagine l'effetto di Object-fit: cover.


Ecco una dimostrazione della logica di cui sopra.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Questa logica funziona in tutti i browser.

La soluzione è facile con un po 'di matematica ...

Basta mettere l'immagine in un div e poi nel file HTML in cui si specifica l'immagine. Imposta i valori di larghezza e altezza in percentuale utilizzando i valori dei pixel dell'immagine per calcolare il rapporto esatto tra larghezza e altezza.

Ad esempio, supponi di avere un'immagine con una larghezza di 200 pixel e un'altezza di 160 pixel. Puoi tranquillamente dire che il valore della larghezza sarà 100%, perché è il valore più grande. Per calcolare il valore di altezza, devi semplicemente dividere l'altezza per la larghezza che dà il valore percentuale dell'80%. Nel codice sarà simile a questo ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>
0
user2796283