Problema css con immagini responsive

**Pi_Dior** · 11-02-2016, 15:00

Salve a tutti amici, ho un problema con i css e il ridimensionamento delle immagini in maniera responsive.

Ho 1 div contenitore e 4 div al suo interno (allineati orizzontalmente tra loro) che contengono rispettivamente 1 immagine ciascuno.

Il mio foglio di stile è il seguente, ma noto con mio dispiacere che le immagini al ridimensionamento della finestra restano della stessa grandezza e, ovviamente, se stringo la finestra ulteriormente tendono solamente ad allinearsi verticalmente.

C'è qualcuno che potrebbe spiegarmi il perchè e darmi una mano?

codice:

#conteiner_box {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    z-index: -1;
}

#conteiner_box > div {
    display: inline-block;
    height: auto;
    max-width:100%;
}

Grazie comunque per l'attenzione.

**carlomarangoni** · 11-02-2016, 15:47

Per capire meglio ci devi fare vedere anche il codice html, comunque penso tu abbia dato una misura in px alle immagini che devono avere invece una misura in %

**Pi_Dior** · 11-02-2016, 15:56

Originariamente inviata da carlomarangoni

Per capire meglio ci devi fare vedere anche il codice html, comunque penso tu abbia dato una misura in px alle immagini che devono avere invece una misura in %

Intanto grazie Carlo, questo è l'html:

codice:

<div id="conteiner_box">
    <div><a href="#"><img src="immagine1.png"></a></div>
    <div><a href="#"><img src="immagine2.png"></a></div>
    <div><a href="#"><img src="immagine3.png"></a></div>
    <div><a href="#"><img src="immagine4.png"></a></div>
</div>

**carlomarangoni** · 11-02-2016, 16:32

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#conteiner_box {
    width: 100%;
    margin: 0 auto;
    z-index: -1;
}

#conteiner_box > div {
    width:33%;
    float: left;
}
img {
    width: 100%;
}
#clear {
    clear: both;
}
</style>
</head>

<body>
<div id="conteiner_box">
    <div><a href="#"><img src="immagine1.png"></a></div>
    <div><a href="#"><img src="immagine2.png"></a></div>
    <div><a href="#"><img src="immagine3.png"></a></div>
    <div><a href="#"><img src="immagine4.png"></a></div>
    <div id="clear">&nbsp;</div>
</div>
</body>
</html>

**Pi_Dior** · 11-02-2016, 16:42

Grazie mille Carlo, ho corretto il 33% in 25% dato che sono 4 le immagini totali, infatti con il 33% un'immagine mi finiva nella riga sotto.
Scusa l'ignoranza quel div "clear" e relativa regola associata nel css a cosa servono in questo caso specifico?

**carlomarangoni** · 11-02-2016, 17:07

float serve per allineare i div e clear serve per per far proseguire gli elementi nel normale flusso della pagina

Discussione: Problema css con immagini responsive

Strumenti discussione

Ricerca discussione

Visualizza

Problema css con immagini responsive

Permessi di invio