Devo estendere questa immagine alla dimensione massima possibile senza traboccare <div>o inclinare l'immagine.

Non riesco a prevedere le proporzioni dell'immagine, quindi non c'è modo di sapere se usare:

<img src="url" style="width: 100%;">

o

<img src="url" style="height: 100%;">

Non posso usare entrambi (cioè style = "larghezza: 100%; altezza: 100%;") perché ciò allungherà l'immagine per adattarla a <div>.

Il <div>ha un insieme formato dalla percentuale dello schermo, che è anche imprevedibile.

Aggiornamento 2016:

Il browser moderno si comporta molto meglio. Tutto quello che dovresti fare è impostare la larghezza dell'immagine al 100% ( demo )

.container img {
   width: 100%;
}

Poiché non conosci le proporzioni, dovrai utilizzare alcuni script. Ecco come lo farei con jQuery ( demo ):

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

copione

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

C'è un modo molto più semplice per farlo usando solo CSSe HTML:

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Ciò posizionerà l'immagine come sfondo e la allungherà per adattarla alle divdimensioni senza distorsioni.

Non è una soluzione perfetta, ma questo CSS potrebbe aiutare. Lo zoom è ciò che fa funzionare questo codice e il fattore dovrebbe teoricamente essere infinito per funzionare idealmente per immagini di piccole dimensioni, ma nella maggior parte dei casi 2, 4 o 8 funzionano bene.

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

Se puoi, usa le immagini di sfondo e imposta background-size: cover. Questo farà sì che lo sfondo copra l'intero elemento.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Se sei bloccato con l'utilizzo di immagini in linea ci sono alcune opzioni. Prima di tutto

oggetto-fit

Questa proprietà agisce su immagini, video e altri oggetti simili background-size: cover.

CSS

img {
  object-fit: cover;
}

Purtroppo, il supporto del browser non è eccezionale con IE fino alla versione 11 che non lo supporta affatto. L'opzione successiva utilizza jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Plugin jQuery personalizzato

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Usa il plugin in questo modo

jQuery('.cover-image').coverImage();

Prende un'immagine, la imposta come immagine di sfondo sull'elemento wrapper dell'immagine e rimuove il img tag dal documento. Infine potresti usare

CSS puro

È possibile utilizzare questo come fallback. L'immagine si ingrandirà per coprire il suo contenitore ma non si ridimensionerà.

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Spero che questo possa aiutare qualcuno, buona programmazione!

Grazie a CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE ed EDGE come sempre estranei: http://caniuse.com/#feat=object-fit

Aggiornamento 2019.

Ora puoi usare la object-fitproprietà css che accetta i seguenti valori:fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Ad esempio, potresti avere un contenitore che contiene un'immagine.

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;

È impossibile solo con HTML e CSS, o almeno selvaggiamente esotici e complicati. Se sei disposto a inserire javascript, ecco una soluzione che utilizza jQuery:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

Ciò ridimensionerà l'immagine in modo che si adatti sempre all'interno dell'elemento genitore, indipendentemente dalle sue dimensioni. E poiché è legato $(window).resize()all'evento, quando l'utente ridimensiona la finestra, l'immagine si adatterà.

Questo non cerca di centrare l'immagine nel contenitore, sarebbe possibile ma immagino non sia quello che stai cercando.

Imposta la larghezza e l'altezza del containerdiv esterno . Quindi utilizzare lo stile seguente su img:

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

Questo ti aiuterà a mantenere le proporzioni del tuo img

Se vuoi impostare una larghezza o altezza massima (in modo che non sia molto grande) mantenendo le proporzioni delle immagini, puoi farlo:

img{
   object-fit: contain;
   max-height: 70px;
}

Mi sono imbattuto in questa domanda alla ricerca di un problema simile. Sto realizzando una pagina web con un design reattivo e la larghezza degli elementi posizionati sulla pagina è impostata su una percentuale della larghezza dello schermo. L'altezza è impostata con un valore vw.

Dal momento che sto aggiungendo post con PHP e un back-end di database, CSS puro era fuori discussione. Tuttavia, ho trovato la soluzione jQuery / javascript un po 'problematica, quindi mi è venuta in mente una soluzione ordinata (quindi almeno mi penso).

HTML (o php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

Usando style = "" è possibile che PHP aggiorni la mia pagina in modo dinamico e lo stile CSS insieme a style = "" finirà in un'immagine perfettamente coperta, ridimensionata per coprire il div-tag dinamico.

Puoi usare object-fit: cover; sul div genitore.

https://css-tricks.com/almanac/properties/o/object-fit/

Per rendere questa immagine allungare alla massima dimensione possibile senza traboccare o inclinare l'immagine.

Applicare...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

stili all'immagine.

Usando questo metodo puoi riempire il tuo div con il rapporto di variazione dell'immagine di div e immagini.

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

Questo ha fatto il trucco per me

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

se lavori con il tag IMG, è facile.

Ho fatto questo:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

ma non ho trovato il modo di farlo funzionare con #pic {background: url (img / menu.png)} Enyone? Grazie

Ho avuto un problema simile. L'ho risolto solo con CSS .

Fondamentalmente Object-fit: coverti aiuta a raggiungere il compito di mantenere le proporzioni mentre posizioni un'immagine all'interno di un div.

Ma il problema era Object-fit: cover non stava funzionando in IE e stava prendendo la larghezza del 100% e l'altezza del 100% e le proporzioni erano distorte. In altre parole, l'effetto di zoom dell'immagine non era presente, come vedevo in Chrome.

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.

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... E se vuoi impostare o cambiare l'immagine (usando #foo come esempio):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

Molte delle soluzioni trovate hanno alcune limitazioni: alcune non funzionano in IE (adattamento agli oggetti) o nei browser più vecchi, altre soluzioni non scalano le immagini (solo le riducono), molte soluzioni non supportano il ridimensionamento della finestra e molte sono non generico, aspettarsi risoluzione o layout fissi (verticale o orizzontale)

Se l'utilizzo di JavaScript e jquery non è un problema, ho questa soluzione basata sul codice di @Tatu Ulmanen. Ho risolto alcuni problemi e aggiunto del codice nel caso in cui l'immagine venisse caricata in modo dinamico e non fosse disponibile all'inizio. Fondamentalmente l'idea è di avere due diverse regole CSS e applicarle quando necessario: una quando la limitazione è l'altezza, quindi dobbiamo mostrare le barre nere ai lati, e l'altra regola CSS quando la limitazione è la larghezza, quindi abbiamo bisogno di mostra le barre nere in alto / in basso.

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

Per un elemento HTML come:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>