Sto lavorando con le immagini e ho riscontrato un problema con le proporzioni.

<img src="big_image.jpg" width="900" height="600" alt="" />

Come puoi vedere, heighte widthsono già stati specificati. Ho aggiunto la regola CSS per le immagini:

img {
  max-width:500px;
}

Ma per big_image.jpg, ricevo width=500e height=600. Come posso impostare il ridimensionamento delle immagini, mantenendo le proporzioni.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Ciò ridurrà l'immagine se è troppo grande per l'area specificata (come inconveniente, non ingrandirà l'immagine).

Ho lottato con questo problema abbastanza duramente e alla fine sono arrivato a questa semplice soluzione:

object-fit: cover;
width: 100%;
height: 250px;

Puoi regolare la larghezza e l'altezza in base alle tue esigenze e la proprietà adatta all'oggetto farà il ritaglio per te.

Saluti.

Le soluzioni di seguito consentiranno il ridimensionamento e il ridimensionamento dell'immagine , a seconda della larghezza della casella padre.

Tutte le immagini hanno un contenitore padre con una larghezza fissa solo a scopo dimostrativo . In produzione, questa sarà la larghezza della casella padre.

Best Practice (2018):

Questa soluzione dice al browser di rendere l'immagine con la larghezza massima disponibile e regolare l'altezza come percentuale di quella larghezza.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Soluzione più elaborata:

Con la soluzione più elaborata, sarai in grado di ritagliare l'immagine indipendentemente dalle sue dimensioni e aggiungere un colore di sfondo per compensare il ritaglio.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Per la linea che specifica il riempimento, è necessario calcolare le proporzioni dell'immagine, ad esempio:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Quindi, imbottitura superiore = 34,37%.

La proprietà size-background è solo> = 9, ma se per te va bene, puoi usare un div con background-imagee impostare background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Ora puoi semplicemente impostare la dimensione del div su quello che vuoi e non solo l'immagine manterrà le sue proporzioni, ma sarà anche centralizzata sia verticalmente che orizzontalmente all'interno del div. Basta non dimenticare di impostare le dimensioni sul CSS poiché i div non hanno l'attributo larghezza / altezza sul tag stesso.

Questo approccio è diverso dalla risposta di setecs, usando questa l'area dell'immagine sarà costante e definita da te (lasciando spazi vuoti orizzontalmente o verticalmente a seconda della dimensione div e delle proporzioni dell'immagine), mentre la risposta di setecs ti darà una casella che esattamente dimensione dell'immagine ridimensionata (senza spazi vuoti).

Modifica: in base alla documentazione sulle dimensioni dello sfondo MDN, è possibile simulare la proprietà delle dimensioni dello sfondo in IE8 utilizzando una dichiarazione di filtro proprietaria:

Sebbene Internet Explorer 8 non supporti la proprietà delle dimensioni dello sfondo, è possibile emulare alcune delle sue funzionalità utilizzando la funzione non -ms-filter standard:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Molto simile ad alcune risposte qui, ma nel mio caso avevo immagini che a volte erano più alte, a volte più grandi.

Questo stile ha funzionato come un fascino per assicurarsi che tutte le immagini utilizzino tutto lo spazio disponibile, mantengano il rapporto e non i tagli:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Rimuovere la proprietà "height".

<img src="big_image.jpg" width="900" alt=""/>

Specificando entrambi si stanno modificando le proporzioni dell'immagine. Basta impostarne uno per ridimensionare ma preservare le proporzioni.

Facoltativamente, per limitare gli eccessi:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Basta aggiungere questo al tuo CSS, si ridurrà automaticamente e si espanderà mantenendo il rapporto originale.

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

Non v'è alcun modo standard per preservare proporzioni per le immagini con width, heighte max-widthspecificato insieme.

Pertanto, siamo costretti a specificare widthe heightimpedire i "salti" di pagina durante il caricamento delle immagini oppure a utilizzare max-widthe non specificare le dimensioni per le immagini.

Specificare solo width(senza height) in genere non ha molto senso, ma puoi provare a sovrascrivere l' heightattributo HTML aggiungendo una regola come IMG {height: auto; }nel tuo foglio di stile.

Vedi anche il relativo bug 392261 di Firefox .

Ecco una soluzione:

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

Questo farà in modo che l'immagine copra sempre l'intero genitore (ridimensionando su e giù) e mantenendo le stesse proporzioni.

Imposta la classe CSS del tag del contenitore di immagini su image-class:

<div class="image-full"></div>

e aggiungi questo tuo foglio di stile CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Per mantenere un'immagine reattiva mentre si impone all'immagine di avere un determinato formato è possibile effettuare le seguenti operazioni:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

E SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Questo può essere usato per imporre un certo formato, indipendentemente dalle dimensioni dell'immagine caricata dagli autori.

Grazie a @Kseso su http://codepen.io/Kseso/pen/bfdhg . Controlla questo URL per ulteriori rapporti e un esempio funzionante.

Per forzare l'immagine che si adatta a una dimensione esatta, non è necessario scrivere troppi codici. È così semplice

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Ecco la risposta se vuoi mettere un'immagine con percentuale di larghezza fissa , ma non pixel di larghezza fissi .

E questo sarà utile quando si ha a che fare con schermi di dimensioni diverse .

I trucchi sono

1. Utilizzo padding-topper impostare l'altezza dalla larghezza.
2. Usare position: absoluteper mettere l'immagine nello spazio di riempimento.
3. Usare max-height and max-widthper assicurarsi che l'immagine non si sovrapponga all'elemento genitore.
4. usando display:block and margin: autoper centrare l'immagine.

Ho anche commentato la maggior parte dei trucchi all'interno del violino.

Trovo anche altri modi per farlo accadere. Non ci sarà alcuna immagine reale in html, quindi ho personalmente la risposta migliore quando ho bisogno dell'elemento "img" in html.

CSS semplice usando lo sfondo http://jsfiddle.net/4660s79h/2/

immagine di sfondo con la parola in alto http://jsfiddle.net/4660s79h/1/

il concetto di utilizzare la posizione assoluta è da qui http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Puoi usare questo:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Puoi creare un div come questo:

<div class="image" style="background-image:url('/to/your/image')"></div>

E usa questo css per modellarlo:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Suggerirei per un approccio reattivo che la migliore pratica sarebbe usare le unità Viewport e gli attributi min / max come segue:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Ciò ridurrà l'immagine se è troppo grande per l'area specificata (come inconveniente, non ingrandirà l'immagine).

La soluzione di setec va bene per "Riduci per adattarsi" in modalità automatica. Tuttavia, per ESPANDERE in modo ottimale per adattarsi alla modalità "auto", è necessario prima inserire l'immagine ricevuta in un ID temporaneo, controllare se può essere espansa in altezza o in larghezza (a seconda della sua proporzione v / s il rapporto di aspetto di il blocco display),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Questo approccio è utile quando le immagini ricevute sono più piccole della casella di visualizzazione. È necessario salvarli sul server in formato originale piccolo anziché nella versione espansa per riempire la casella di visualizzazione più grande per risparmiare su dimensioni e larghezza di banda.

Che ne dici di usare uno pseudo elemento per l'allineamento verticale? Questo codice in meno è per una giostra ma immagino che funzioni su ogni contenitore di dimensioni fisse. Manterrà le proporzioni e inserirà le barre @ grigio-scure in alto / in basso o a sinistra / scrittura per la dimensione più breve. Nel frattempo l'immagine è centrata orizzontalmente dall'allineamento del testo e verticalmente dall'elemento pseudo.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Presentazione a schermo intero:

img[data-attribute] {height: 100vh;}

Tieni presente che se l'altezza della porta di visualizzazione è maggiore dell'immagine, l'immagine si degraderà naturalmente rispetto alla differenza.

Penso, infine, che questa sia la soluzione migliore, facile e semplice :

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