Come si ridimensiona automaticamente un'immagine di grandi dimensioni in modo che si adatti a un contenitore div di larghezza inferiore mantenendo la sua larghezza: rapporto di 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 ridimensionata automaticamente.

Non applicare una larghezza o un'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>

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

Attualmente non è possibile farlo correttamente in modo deterministico, con immagini di dimensioni fisse come file JPEG o PNG.

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

La scelta dell'altezza o della larghezza dipende dall'immagine e dalle dimensioni del contenitore:

1. Se l'immagine e il contenitore sono entrambi "a forma di ritratto" o entrambi "a forma di paesaggio" (più alti di quelli che sono larghi o più larghi di quelli che sono alti, rispettivamente), 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 è verticale, è necessario impostare width="100%"sull'immagine.

Se l'immagine è un file SVG, che è un formato di immagine vettoriale di dimensioni variabili, è possibile che l'espansione per adattarsi al contenitore avvenga automaticamente.

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

height
width
viewbox

La maggior parte dei programmi di disegno vettoriale 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.

Ecco una soluzione che allineerà il tuo img sia verticalmente che orizzontalmente all'interno di un div senza alcun allungamento anche se l'immagine fornita è troppo piccola o troppo grande per adattarsi al 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);
    }

Falla semplice!

Dare un contenitore fisso height e quindi per il imgtag al suo interno, impostare widthe max-height.

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

La differenza è che hai impostato il width100%, non il max-width.

Un bellissimo trucco.

Hai due modi per rendere l'immagine reattiva.

1. Quando un'immagine è un'immagine di sfondo.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Eseguilo qui

2. Quando l'immagine è nel imgtag.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Eseguilo qui

È possibile impostare l'immagine come sfondo su un div, quindi utilizzare la proprietà CSS di dimensioni dello sfondo :

background-size: cover;

Sarà "Scala l'immagine di sfondo di essere il più grande possibile, in modo che l'area di sfondo è completamente coperto da l'immagine di sfondo Alcune parti dell'immagine di sfondo non possono essere in vista all'interno del fondo dell'area di posizionamento." - W3Schools

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

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

Dato tale 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;
}

Ho appena pubblicato un plugin jQuery che fa esattamente quello 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();
});

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

Vedo che molte persone hanno suggerito di adattarsi agli oggetti, che è una buona opzione. Ma se vuoi che funzioni anche nei browser più vecchi , c'è un altro modo di farlo facilmente.

È abbastanza semplice. L'approccio che ho seguito è stato quello di posizionare l'immagine all'interno del contenitore con assoluta e quindi posizionarla al centro usando la combinazione:

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

Una volta che è al centro, io do 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 fa sì che l'immagine ottenga l'effetto di Object-fit: cover.

Ecco una dimostrazione della logica sopra.

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

Questa logica funziona in tutti i browser.

Quanto segue funziona perfettamente per me:

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

Ho una soluzione molto migliore senza bisogno di JavaScript. È completamente reattivo e lo uso molto. Spesso è necessario adattare un'immagine di qualsiasi formato all'elemento contenitore con un formato specifico. E avere tutto questo pienamente reattivo è 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 in modo indipendente; l'immagine rispetterà la più piccola (a seconda dei valori e delle proporzioni dell'immagine). È inoltre possibile impostare l'immagine affinché sia ​​allineata come desiderato (ad esempio, per un'immagine di prodotto su uno sfondo bianco infinito è possibile posizionarla facilmente al centro del fondo).

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

Nel tag <img>, inserisci max-heighte max-widthcome 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 capito bene.

Il codice seguente è adattato dalle risposte precedenti ed è testato da me usando un'immagine chiamata storm.jpg.

Questo è il codice HTML completo per una semplice pagina che visualizza l'immagine. Funziona perfettamente ed è stato testato da me con www.resizemybrowser.com. Inserisci il codice CSS nella parte superiore del codice HTML, sotto la sezione head. Inserisci il codice immagine dove vuoi 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>

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

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

Modifica: il posizionamento dell'immagine precedente basato su tabella presentava problemi in Internet Explorer 11 ( max-heightnon funziona negli display:tableelementi). L'ho sostituito con il posizionamento basato in linea che non solo funziona bene 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-widthe max-heightnon sembra andare d'accordo con contenitori che non hanno una dimensione concreta), ma ho scritto il contenuto CSS in modo da consentirne il riutilizzo (aggiungi picture-frameclasse e px125classe di dimensione al contenitore esistente).

Nel 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 (upscaling delle immagini):

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

Ho risolto questo problema usando 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%;
}

Come spiegato qui , puoi anche utilizzare le vhunità invece che max-height: 100%se non funziona sul tuo browser (come Chrome):

img {
    max-height: 75vh;
}

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 in Internet Explorer, Firefox e Safari.

Maggiori informazioni sul centraggio sono qui .

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>

Appunti:

1. Per WebKit è necessario 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 è quella di impostare la larghezza massima e l'altezza massima al 25%. È ancora più semplice.

Se stai usando Bootstrap, devi solo aggiungere la img-responsiveclasse al imgtag:

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

Immagini Bootstrap

Di seguito è riportata una soluzione semplice (correzione in 4 passaggi !!) che sembra funzionare per me. L'esempio usa la larghezza per determinare la dimensione complessiva, ma puoi anche capovolgerla per usare l'altezza.

1. Applicare lo stile CSS al contenitore di immagini (ad esempio <img>)
2. Impostare la proprietà width sulla dimensione desiderata
   • Per le dimensioni, utilizzare %per le dimensioni relative o il ridimensionamento automatico (basato sul contenitore o sul display dell'immagine)
   • 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"
/>

Tutte le risposte fornite, compresa quella accettata, funzionano solo supponendo che il divwrapper abbia una dimensione fissa. Quindi, ecco come farlo qualunque sia la dimensione del divwrapper e questo è molto utile se sviluppi una pagina reattiva:

Scrivi queste dichiarazioni nel tuo DIVselettore:

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

Quindi inserisci queste dichiarazioni nel IMGselettore:

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

MOLTO IMPORTANTE:

Il valore maxHeightdeve essere la stessa per entrambi i DIVe IMGselettori.

Una soluzione semplice è usare flexbox. Definire 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 una bella immagine centrata nel contenitore con le dimensioni conservate.

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

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

Ad esempio, supponiamo di avere un'immagine che ha una larghezza di 200 pixel e un'altezza di 160 pixel. Puoi tranquillamente affermare che il valore della larghezza sarà del 100%, perché è il valore più grande. Per calcolare quindi il valore dell'altezza è sufficiente 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>

Il modo più semplice per farlo è usando object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Se stai usando Bootstrap, aggiungi semplicemente la img-responsiveclasse e passa a

.container img{
    object-fit: cover;
}

Controlla la mia risposta, Rendi l'immagine reattiva - il modo più semplice -

img{
    width: 100%;
    max-width: 800px;
}

Oppure puoi semplicemente usare:

background-position:center;
background-size:cover;

Ora l'immagine occuperà tutto lo spazio del div.