Il CSS forza il ridimensionamento dell’immagine e mantiene le proporzioni

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

 

Come puoi vedere, height e width sono già specificate. Ho aggiunto la regola CSS per le immagini:

 img { max-width:500px; } 

Ma per https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio/big_image.jpg , ricevo width=500 e height=600 . Come posso impostare le immagini da ridimensionare, mantenendo i loro rapporti d’aspetto.

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

This image is originally 400x400 pixels, but should get resized by the CSS:

Le soluzioni seguenti consentiranno il ridimensionamento e ridimensionamento dell’immagine , a seconda della larghezza della casella genitore.

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

Best Practice (2018):

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

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

This image is originally 400x400 pixels, but should get resized by the CSS:

Ho faticato abbastanza con questo problema 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à object-fit farà il ritaglio per te.

Saluti.

La proprietà background-size è solo> = 9, ma se ciò va bene con te, puoi usare un div con background-image e 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 tua dimensione div a 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 width / height sul tag stesso.

Questo approccio è diverso dalla risposta di setecs, usando questo l’area dell’immagine sarà costante e definita dall’utente (lasciando spazi vuoti sia orizzontalmente che verticalmente a seconda della dimensione div e dello aspect ratio dell’immagine), mentre la risposta setecs ti darà una scatola che esattamente dimensione dell’immagine ridimensionata (senza spazi vuoti).

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

Sebbene Internet Explorer 8 non supporti la proprietà background-size, è ansible emulare alcune delle sue funzionalità usando la funzione non -ms-filter:

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

Rimuovi la proprietà “altezza”.

  

Specificando entrambi si stanno modificando le proporzioni dell’immagine. Solo impostando uno si ridimensionerà ma preservare le proporzioni.

Facoltativamente, per limitare le oversize:

  

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

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

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

Non esiste un modo standard per conservare le proporzioni per le immagini con width , height e max-width specificate insieme.

Quindi siamo costretti a specificare width e height per evitare che la pagina “salti” durante il caricamento delle immagini, o per utilizzare la max-width e non specificare le dimensioni per le immagini.

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

Vedi anche il relativo bug di Firefox 392261 .

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

Ecco la risposta se vuoi inserire un’immagine con una percentuale fissa di larghezza , ma non un pixel di larghezza fisso .

E questo sarà utile quando si ha a che fare con dimensioni diverse dello schermo .

I trucchi sono

  1. Utilizzando padding-top per impostare l’altezza dalla larghezza.
  2. Usare la position: absolute per mettere l’immagine nello spazio di riempimento.
  3. Usando max-height and max-width per assicurarsi che l’immagine non superi l’elemento genitore.
  4. utilizzando display:block and margin: auto per 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 perfero 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 cima http://jsfiddle.net/4660s79h/1/

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

Imposta la class CSS del tag del contenitore di image-class :

 

e aggiungi questo foglio di stile CSS.

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

Per mantenere un’immagine retriggers mentre si applica ancora l’immagine per avere un certo formato, puoi fare quanto segue:

HTML:

 
image

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 forzare un determinato formato, indipendentemente dalla dimensione dell’immagine caricata dagli autori.

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

Puoi creare un div in questo modo:

 

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 

Puoi usare questo:

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

Per forzare l’immagine che si adatta in 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 */ } 
 Logo 

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

La soluzione di setec va bene per “Shrink to Fit” in modalità automatica. Ma, per ESPANDERE in modo ottimale per adattarsi alla modalità ‘auto’, devi prima mettere l’immagine ricevuta in un temp id, Controlla se può essere espansa in altezza o in larghezza (a seconda della sua proporzione v / s delle proporzioni di il tuo blocco di visualizzazione),

 $(".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 finestra di visualizzazione. È necessario salvarli sul server in dimensioni Small originali piuttosto che in versione espansa per riempire la casella di visualizzazione Bigger per risparmiare dimensioni e larghezza di banda.

 img { max-width: 80px; /* Also works with percentage value like 100% */ height: auto; } 
 

This image is originally 400x400 pixels, but should get resized by the CSS:

Let's say the author of the HTML deliberately wants the height to be half the value of the width, this CSS will ignore the HTML author's wishes, which may or may not be what you want:

Che ne dici di usare uno pseudo elemento per l’allineamento verticale? Questo codice meno è per un carosello ma immagino che funzioni su ogni contenitore di dimensioni fisse. Manterrà le proporzioni e inserirà @ barre grigio-scure sopra / sotto o sinistra / scrittura per la dimensione più corta. Nel frattempo l’immagine è centrata orizzontalmente dal testo allineato e verticalmente dallo pseudo elemento.

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