Come ridimensionare un'immagine mantenendo le proporzioni in CSS?

Ho un'immagine grande. Voglio visualizzarlo sul proprio una pagina Web, e quando lo faccio senza CSS, riempie l'intera pagina ed è troppo grande per essere visualizzato in una volta (appaiono le barre di scorrimento). Voglio ridimensionarlo in modo che si adatti all'altezza dello schermo dell'utente (non della larghezza). Ho trovato delle soluzioni, ma queste estendono l'immagine per adattarle all'intero schermo: non voglio che ciò rovini le proporzioni.Come ridimensionare un'immagine mantenendo le proporzioni in CSS?

Fondamentalmente, voglio ridimensionare un'immagine mantenendo le proporzioni. Come faccio a fare questo?

fonte

2012-09-07 user1447941

http://stackoverflow.com/questions/10559058/resize -view-width-preserve-image-aspect-ratio-with-css –

Basta specificare l'altezza e lasciare la proprietà width così com'è. – knittl

Questo è un argomento ripetuto con una soluzione già esistente. https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container –

Basta impostare il width-auto:

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

Ecco il violino: http://jsfiddle.net/6Y5Zp/

fonte

2012-09-07 15:09:20

Come posso regolare automaticamente l'altezza per adattarla al miglior rapporto di aspetto possibile a seconda delle dimensioni dell'immagine? – user1447941

@ user1447941 - Il codice sopra fa esattamente questo. –

Se si desidera regolare la larghezza: larghezza: 100% e altezza: auto invece – speeder

È possibile utilizzare un div background-image con e impostare lo sfondo di seno: contenere:

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

Ora puoi semplicemente impostare la tua dimensione div su ciò che vuoi e non solo l'immagine manterrà le proporzioni, ma sarà anche centralizzata verticalmente e orizzontalmente. Basta non dimenticare di impostare le dimensioni sul css poiché i div non hanno l'attributo width/height sul tag stesso.

La proprietà background-size è es.> = 9 solo se.

fonte

2013-05-30 13:59:37 Hoffmann

Penso che avete bisogno di incollare una classe all'interno dell'immagine che si desidera mostrare come questo

< image class="image" >

e questa è la classe

.image 


text align: center 
max width:pixels you want 
max height pixels you want

ma assicuratevi che entrambi sono la stessa quantità in questo modo non uscirai dallo schermo in altezza e larghezza.

o si può giocare con la larghezza e l'altezza

fonte

2013-06-05 02:56:20 jose

qui è il campione di uno

div{ 
 
    width: 200px; 
 
    height:200px; 
 
    border:solid 
 
} 
 

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

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"> 
 
</div>

fonte

2015-02-22 11:21:22

Questa è la soluzione più semplice, ma si noti che IE non supporta la proprietà object-fit. – cytsunny

Apparentemente nemmeno IE 11 o Edge 15 supportano questo: http://caniuse.com/#feat=object-fit – Grav

Come ridimensionare un'immagine mantenendo le proporzioni in CSS?

risposta

Problemi correlati