Come posso ridimensionare automaticamente un'immagine per adattarla a un contenitore "div"?

StackOverflow https://stackoverflow.com/questions/3029422

  •  26-09-2019
  •  | 
  •  

Domanda

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

È stato utile?

Soluzione

Non applicare una larghezza o un'altezza esplicita al tag immagine. Invece, dai:

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

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

Altri suggerimenti

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.

Violino: http://jsfiddle.net/mbhb4/7364/

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

Per ridimensionare un'immagine proporzionalmente, devi impostare o l'altezza o la larghezza al "100%", ma non a entrambi. Se imposti entrambi su "100%", la tua immagine verrà allungata.

Scegliere se fare altezza o larghezza dipende dalle dimensioni dell'immagine e del contenitore:

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

Se la tua immagine è un SVG, che è un formato di immagine vettoriale di dimensioni variabili, è possibile avere l'espansione per adattarsi al contenitore si verifica automaticamente.

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

height
width
viewbox

La maggior parte dei programmi di disegno vettoriale là fuori imposterà queste proprietà durante l'esportazione di un file SVG, quindi dovrai modificare manualmente il tuo file ogni volta che esporta o scrivere uno script per farlo.

Ecco una soluzione che allineerà sia l'IMG 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);
    }

Rendilo semplice!

Dare al contenitore a fisso height e poi per il img tagga al suo interno, imposta width e max-height.

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

La differenza è che si imposta il width per essere al 100%, non il max-width.

Un bellissimo hack.

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>

Eseguirlo qui

Ma si dovrebbe usare img tag per mettere le immagini in quanto è migliore di background-image in termini di Seo Come puoi scrivere parola chiave nel alt del img etichetta. Quindi ecco che puoi rendere l'immagine reattiva.

  1. Quando l'immagine è in img etichetta.
#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>

Eseguirlo qui

Dai un'occhiata alla mia soluzione: http://codepen.io/petethepig/pen/dvfsa

È scritto in CSS puro, senza alcun codice JavaScript. Può gestire immagini di qualsiasi dimensione e qualsiasi 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;
}

È possibile impostare l'immagine come sfondo su un div, quindi utilizzare il Proprietà CSS di dimensioni background:

background-size: cover;

Lo farà "Ridimensionare l'immagine di sfondo 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 in vista all'interno dell'area di posizionamento dello sfondo" -- W3Schools

Ho appena pubblicato un plug -in jQuery che fa esattamente ciò di cui hai bisogno con molte opzioni:

https://github.com/gestixi/image-cale

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 un po '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%;
}

Il seguente 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 alcun JavaScript. È pienamente reattivo e lo uso molto. Spesso è necessario adattare un'immagine di qualsiasi proporzione a un elemento contenitore con un rapporto di aspetto specificato. E avere intera 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 (a seconda dei valori e delle proporzioni dell'immagine). È inoltre possibile impostare l'immagine in modo che tu sia allineato come desideri (ad esempio, per un'immagine del prodotto su uno sfondo bianco infinito puoi posizionarla facilmente sul fondo centrale).

Dai l'altezza e la larghezza di cui hai bisogno per la tua immagine al div che contiene ilu003Cimg> etichetta. Non dimenticare di dare l'altezza/larghezza nel tag di stile corretto.

Nelu003Cimg> tag, dai il max-height e max-width come 100%.

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

Puoi aggiungere i dettagli nelle classi appropriate dopo averlo ottenuto bene.

Il codice seguente è adattato dalle risposte precedenti ed è stato testato da me utilizzando 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 dell'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>

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

Ho centrato e ridimensionato proporzionalmente un'immagine all'interno di un collegamento ipertestuale sia orizzontalmente che verticalmente 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.

Ulteriori informazioni sul centraggio sono qui.

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

Per risolverlo, ho aggiunto un fattore di scala. In questo modo, rende l'immagine più grande 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 devi aggiungere -webkit-transform:scale(4); -webkit-transform-origin:left top; nello stile.
  2. Con un fattore di scala di 4, hai una larghezza massima = 400/4 = 100 e max-height = 200/4 = 50
  3. Una soluzione alternativa è quella di impostare la larghezza massima e il massimo al 25%. È ancora più semplice.
<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>

Modificare: Il posizionamento dell'immagine basato su tabella precedente aveva problemi in Internet Explorer 11 (max-height non funziona display:table elementi). L'ho sostituito con un posizionamento basato in linea che non solo funziona bene sia in Internet Explorer 7 che a 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 sembra che andare d'accordo con contenitori che non hanno dimensioni concrete), ma ho scritto il contenuto CSS in un modo che gli consente di riutilizzare (aggiungi picture-frame classe e px125 Classe di dimensioni per il 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>

EDIT: possibile ulteriore miglioramento utilizzando JavaScript (upscaling 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) };
});

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

img {
    max-height: 75vh;
}

Vedo che molte persone sono suggerimenti Object-Fit che è una buona opzione. Ma se vuoi è lavorare Anche browser più vecchi, c'è un altro modo di farlo facilmente.

Per favore controlla la mia risposta qui:IE e Edge Fix per oggetto-FIT: Copertura;

È abbastanza semplice. L'approccio che ho adottato è stato quello di posizionare l'immagine all'interno del contenitore assoluto poi Mettilo direttamente al centro Usando la combinazione: 

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

Una volta che è al centro, 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 ottiene 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.

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

  1. Applicare lo stile CSS al contenitore dell'immagine (ad esempio,u003Cimg> )
  2. Imposta la proprietà di larghezza sulla dimensione desiderata
    • Per dimensioni, usa % per dimensioni relative o automaticamente (in base al contenitore o al display)
    • Uso px (o altro) per una dimensione statica o impostata
  3. Impostare la proprietà di altezza per regolare automaticamente, 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, incluso quella accettata, lavoro solo secondo il presupposto che il div Il wrapper è di dimensioni fisse. Quindi questo è come farlo qualunque cosa la dimensione del div Il wrapper è e questo è molto utile se si sviluppa una pagina reattiva:

Scrivi queste dichiarazioni all'interno del tuo DIV selettore:

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

Quindi metti queste dichiarazioni all'interno del tuo IMG selettore:

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

MOLTO IMPORTANTE:

Il valore di maxHeight deve essere il stesso per entrambi i DIV e IMG selettori.

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

Una soluzione semplice è utilizzare Flexbox. Definisci il CSS del contenitore a:

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

Se stai usando bootstrap, devi solo aggiungere il img-responsive classe a img etichetta:

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

Immagini bootstrap

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. Impostare i valori di larghezza e altezza in percentuali usando i valori dei pixel dell'immagine per calcolare il rapporto esatto di larghezza e altezza.

Ad esempio, supponiamo che tu abbia un'immagine che ha una larghezza di 200 pixel e un'altezza di 160 pixel. Puoi tranquillamente dire che il valore di larghezza sarà al 100%, perché è il valore maggiore. Per calcolare il valore di altezza si dividi semplicemente l'altezza per la larghezza che fornisce il valore percentuale dell'80%. Nel codice sembrerà qualcosa di simile ...

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

Controlla la mia risposta, Fare un'immagine reattiva - modo più semplice - 

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

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 il img-responsive classe e cambiare in

.container img{
    object-fit: cover;
}

Oppure puoi semplicemente usare:

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

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top