HTML automatica delle immagini ridimensionare utilizzando pixel e percentuali vincoli

Question

Come posso aggiungere un'immagine a una pagina HTML usando i seguenti vincoli:

• No upscaling consentito (se la larghezza dell'immagine è di 400 pixel io non voglio ridimensionalo a 600).
• L'immagine deve essere ridimensionata se l'elemento che lo contiene è più piccolo dell'immagine.
• Mantieni proporzioni.

Ad esempio, ho un'immagine (400x300). Se l'elemento contenitore è largo 600 pixel, mi piacerebbe mostrare l'immagine a 400x300. Se l'elemento contenitore è largo 200 pixel (ad esempio è un browser mobile) mi piacerebbe mostrare l'immagine a 200x150.

Sto cercando una soluzione CSS pura (se possibile) senza il cablaggio rigido della dimensione dell'immagine.

Answer 1

Utilizzando la proprietà max-width funziona due volte correttamente:

<div style="max-width: 400px" > 
<img src="image.jpg" style="max-width:100%;" /> 
</div> 

Answer 2

Si dovrebbe utilizzare la proprietà max-width:

<div style="width:600px"> 
<img src="images/image.jpg" alt="image" style="max-width:100%;/>  
</div> 

Questo sarà limitare la larghezza dell'immagine all'elemento div genitore, giù scalare l'immagine, se necessario. Non perderà le proporzioni o ingrandirà un'immagine. max-width è supportato in tutti i browser fino a data, ma non in IE6

Answer 3

Non downscaling dell'immagine. - asalamon74

ho inserito il codice di Adamy nel mio HTML e lo fa rimpicciolire l'immagine. Ecco alcuni esempi delle dimensioni dell'immagine che ho: 800w x 626h, 962x640, 895x640. Per questi e altri, li ha ridimensionati correttamente tutti: ovvero dopo aver aggiunto "style =" max-width: 100%; "" al tag img, le immagini si adattano alla larghezza del mio contenitore (# photo-container) e devono scala. Non dicendo che funzionerà nel tuo codice, ma ha funzionato per me. Ecco il mio relativo codice CSS/HTML:

CSS:

#photo-container {display:block; float:left; width: 800px; 
        margin-left:5px; margin-top:0px; 
        padding: 10px 10px 10px 10px; 
        background-color:black; color:white; 
        border-bottom-left-radius: 0.5em; 
        border-bottom-right-radius: 0.5em; 
       } 

HTML:

<div id="photo-container"> 
     <img id="photo-display" src="PlaceHolder" alt="PlaceHolder" 
     style="max-width:100%;"> 
    </div> 

Le immagini sono in realtà collocati utilizzando JavaScript. Il processo di selezione nel mio codice JavaScript è un po 'prolisso per questo argomento, ma essenzialmente equivale a:

photo-display.src=myimage; 

Non ho provato con una foto con una larghezza che è inferiore a 800.

Answer 4

va notato che il tag IMG ha bisogno di avere la proprietà Altezza larghezza & rimosso, altrimenti non sarà in scala correttamente.

Answer 5

Per tag < img> senza utilizzare le div box ecc.

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