Come impostare la larghezza e l'altezza di un'immagine senza allungarla?

Se ho:

#logo {
    width: 400px;
    height: 200px;
}

poi

<img id="logo" src="logo.jpg"/>

si allungherà per riempire quello spazio. Voglio che l'immagine mantenga le stesse dimensioni, ma che occupi così tanto spazio nel DOM. Devo aggiungere un incapsulante <div>o <span>? Odio aggiungere markup per lo styling.

Sì, hai bisogno di un div incapsulante:

<div id="logo"><img src="logo.jpg"></div>

con qualcosa come:

#logo { height: 100px; width: 200px; overflow: hidden; }

Altre soluzioni (padding, margin) sono più noiose (in quanto è necessario calcolare il valore corretto in base alle dimensioni dell'immagine) ma non consentono in modo efficace che il contenitore sia più piccolo dell'immagine.

Inoltre, quanto sopra può essere adattato molto più facilmente per diversi layout. Ad esempio, se vuoi l'immagine in basso a destra:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Risposta del 2017

L'adattamento dell'oggetto CSS funziona in tutti i browser correnti. Consente imgall'elemento di essere più grande senza allungare l'immagine.

Puoi aggiungere object-fit: cover;al tuo CSS.

Carica l'immagine come sfondo per un div.

Invece di:

<img id='logo' src='picture.jpg'>

fare

<div id='logo' style='background:url(picture.jpg)'></div>

Tutti i browser ritaglieranno la parte dell'immagine che non si adatta.
Questo ha diversi vantaggi rispetto al wrapping di un elemento il cui overflow è nascosto:

1. Nessun markup aggiuntivo. Il div sostituisce semplicemente img.
2. Centra o imposta facilmente l'immagine su un altro offset. per esempio.url(pic) center top;
3. Ripeti l'immagine quando è abbastanza piccola. (OK, non so perché lo vorresti)
4. Imposta un colore bg nella stessa istruzione, applica facilmente la stessa immagine a più elementi e tutto ciò che si applica alle immagini bg.

Aggiornamento: questa risposta è precedente all'adattamento dell'oggetto; ora dovresti probabilmente usare object-fit / object-position.

È ancora utile per i browser meno recenti, per proprietà extra (come la ripetizione dello sfondo) e per i casi limite (ad esempio, la soluzione dei bug di Chrome con flexbox e object-position e problemi di FF (ex?) Con grid + autoheight + object- fit. I div wrapper in grid / flexbox spesso danno ... risultati non intuitivi.)

Adattamento agli oggetti CSS3

Non sono sicuro di quanto sia stato implementato da webkit, IE e Firefox. Ma Opera funziona come per magia

object-fitfunziona con il contenuto SVG, ma lo stesso effetto può essere ottenuto anche impostando l' preserveAspectRatio=""attributo nell'SVG stesso.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

La demo di Chris Mills è qui http://dev.opera.com/articles/view/css3-object-fit-object-position/

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Crea un div e dagli una lezione. Quindi inserire un'immagine in esso.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

Imposta la dimensione del tuo div e rendilo relativo.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

quindi dai uno stile alla tua immagine

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

Spero possa aiutare

Puoi usare come di seguito:

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Devo aggiungere un <div> o <span> incapsulante?

Penso di sì. L'unica cosa che mi viene in mente è il riempimento, ma per questo dovresti conoscere in anticipo le dimensioni dell'immagine.

puoi provare a impostare il padding invece dell'altezza / larghezza.

Quello che posso pensare è allungare la larghezza o l'altezza e lasciarlo ridimensionare in rapporto all'aspetto. Ci sarà uno spazio bianco sui lati. Qualcosa di simile al modo in cui uno schermo largo visualizza una risoluzione di 1024x768.

Se l'utilizzo di flexbox è un'opzione valida per te (non è necessario supportare i vecchi browser), controlla la mia altra risposta qui (che è forse un duplicato di questa):

Fondamentalmente dovresti avvolgere il tuo tag img in un div e il tuo css sarebbe simile a questo:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

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

Questa è una domanda piuttosto vecchia, ma ho avuto lo stesso identico problema fastidioso in cui tutto ha funzionato bene per Chrome / Edge (con proprietà object-fit) ma la stessa proprietà CSS non ha funzionato in IE11 (poiché non è supportata in IE11), ho finito per utilizzando l'elemento "figure" HTML5 che ha risolto tutti i miei problemi.

Personalmente non ho utilizzato il tag DIV esterno poiché non ha aiutato affatto nel mio caso, quindi ho evitato il DIV esterno e l'ho semplicemente sostituito con l'elemento "figure".

Il codice seguente forza l'immagine a ridurre / ridimensionare bene (senza modificare le proporzioni originali).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

e classi css:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}