Immagini reponsive css

[Crab]

ciao a tutti sono nuovo del forum, da un po' di tempo ho iniziato a usare il css per modificare temi big cartel per siti ecommerce.
Sto avendo difficoltà nel inserire immagini che si ridimensionino a seconda del dispositivo. Il risultato che vorrei ottenere è questo http://eu.elementbrand.com/g/team immagini distanziate tra loro che quando vengono ridotte si adattano alla grandezza della pagina.

[Crab]

si

[Crab]

grazie,questo è il codice senza usare i media e ti allego le foto del risultato, il problema ovviamente è che non usando immagini reponsive quando riduco la finestra l'immagine si sposta in basso a sinistra e lascia un vuoto.
codice:
<p><a href="http://www.arcadebrand.com/lorenzo-masino"><img src="http://i1344.photobucket.com/albums/p650/crabman955/Lorenzomasino_zpsa377e9ec.jpg" alt="" class="fade2" height="100" width="240"></a>&nbsp;&nbsp;&nbsp;
<a href="http://www.arcadebrand.com/dario-luppi"><img src="http://i1344.photobucket.com/albums/p650/crabman955/darioluppi_zps445dd3fa.jpg" alt="" class="fade2" height="100" width="240"></a>&nbsp;&nbsp;
<a href="http://www.arcadebrand.com/federico-covarelli"><img src="http://i1344.photobucket.com/albums/p650/crabman955/federicocovarelli_zps49b0152e.jpg" alt="" class="fade2" height="100" width="240"></a>&nbsp;&nbsp;
<a href="http://www.arcadebrand.com/edoardo-ricci"><img src="http://i1344.photobucket.com/albums/p650/crabman955/EDOIMAGINE_zpsb317c9f1.jpg" alt="" class="fade2" height="100" width="240"></a>
<p>

Schermata 2014-08-27 alle 11.47.06.jpgSchermata 2014-08-27 alle 11.47.35.jpg

[Crab]

a ok scusa non lo sapevo, ho capito perchè lascia lo spazio vuoto ma non ho capito bene come risolvere, scusa ma è da poco che ho iniziato a imparare a lavorare con css ecc.

[Crab]

grazie per la pazienza

cosi va bene ?

html:

codice:

<div id='gallery'>
<a href="http://www.arcadebrand.com/edoardo-ricci"><img src="http://i1344.photobucket.com/albums/p650/crabman955/EDOIMAGINE_zpsb317c9f1.jpg" alt="" class="fade2"></a>
</div>



css:

codice:
@media screen and (min-width :0px) and (max-width : 321px){
#gallery{
width:320px;
}
}
@media screen and (min-width :321px) and (max-width : 481px){
#gallery{
width:480px;
}
}
@media screen and (min-width :481px) and (max-width : 601px){
#gallery{
width:580px;
}
}
@media screen and (min-width :601px) and (max-width : 768px){
#gallery{
width:680px;
}
}
@media screen and (min-width :768px) and (max-width : 900px){
#gallery{
width:780px;
}
}
@media screen and (min-width :900px) and (max-width : 1024px){
#gallery{
width:880px;
}
}

[Crab]

nel codice html non ho capito bene come disporre le immagini affiancate

il css cosi dovrebbe andare

css:

codice:
@media screen and (min-width :0px) and (max-width : 321px){
#gallery{
width:320px;
}
}
@media screen and (min-width :321px) and (max-width : 481px){
#gallery{
width:480px;
}
}
@media screen and (min-width :481px) and (max-width : 601px){
#gallery{
width:600px;
}
}
@media screen and (min-width :601px) and (max-width : 768px){
#gallery{
width:767px;
}
}
@media screen and (min-width :768px) and (max-width : 901px){
#gallery{
width:900px;
}
}
@media screen and (min-width :900px) and (max-width : 1025px){
#gallery{
width:1024px;
}
}
@media screen and (min-width :1025px) and (max-width : 2025px){
#gallery{
width:2024px;
}
}

[Crab]

si il css è da modificare per avere un effetto simile, il meccanismo l'ho capito, il problema sono le immagini che continuano a disporsi una sotto l'altra. si riducono a seconda dell css ma non sono allineate
Schermata 2014-08-27 alle 19.27.35.jpg

[Crab]

ah esatto adesso ci devo solo smanettare un po' per aggiustarlo, sei stato gentilissimo, grazie mille, se ho dei problemi scrivo qui

[Crab]

per far si che le immagini da 4 diventino 2 quando si arriva tra (min-width :601px) and (max-width : 768px) come posso fare ?

[Crab]

rimangono sempre 4 immagini e tra un ridimensionamento e l'altro l'ultima immagine viene tagliata
css:

codice:

.img{
width:23%;
margin:1%;
height:48%;
float:left;
}
.img img{
width:100%;
}
@media screen and (min-width :0px) and (max-width : 321px){
#gallery{
width:320px;
}
}
@media screen and (min-width :321px) and (max-width : 481px){
#gallery{
width:480px;
}
}
@media screen and (min-width :481px) and (max-width : 601px){
#gallery{
width:600px;
}
}
@media screen and (min-width :601px) and (max-width : 768px){
#gallery{
width:767px;
}
}