html - sfondo - inserire un immagine in css




Come impostare la larghezza massima di un'immagine in CSS (4)

Sul mio sito web vorrei visualizzare le immagini caricate dall'utente in una nuova finestra con una dimensione specifica ( width: 600px ). Il problema è che le immagini potrebbero essere grandi. Quindi, se sono più grandi di questi 600px , mi piacerebbe ridimensionarli, preservando le proporzioni.

Ho provato la proprietà CSS max-width , ma non funziona: la dimensione dell'immagine non cambia.

C'è un modo per risolvere questo problema?

HTML :

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS :

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

Ho anche provato a impostare la max-width: 600px per un'immagine, ma non funziona. L'immagine è in streaming da un servlet (è memorizzato all'esterno della cartella webapps di Tomcat).


Data la larghezza del contenitore 600 px.

Se vuoi inserire solo immagini più grandi di quelle che contengono, aggiungi: CSS:

#ImageContainer img {
    max-width: 600px;
}

Se vuoi che TUTTE le immagini prendano lo spazio disponibile (600px):

#ImageContainer img {
    width: 600px;
}

Il problema è che il tag img è un elemento in linea e non puoi limitare la larghezza dell'elemento in linea.

Quindi per limitare prima la larghezza del tag img devi convertirla in un elemento di blocco in linea

img.Image{
    display: inline-block;
}

Prova questo

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}







image-resizing