Hola, interesante para practicar un poco.
Te dejo mi propuesta, que se diferencia en que uso las imágenes como fondo (lo cual no sería muy correcto si es una imagen importante como un producto), y efectos css3.
A tener en cuenta que back-size no es soportado por todos los navegadores.
Código HTML:
Ver original....
<div id="producto1" class="producto"></div> <div id="producto2" class="producto"></div> <div id="producto3" class="producto"></div>
Código CSS:
Ver originalbody{
background-color: #F9C;}
.producto{
background-color:#FFF;
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%; /*solo navegadores avanzados */
border:8px solid #FFF;
border-radius: 50%;
box-shadow:5px 5px 15px #666;
float:left;
margin: 10px auto;
width:500px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
@media screen and (max-width: 399px){
.producto{ height:120px; width:120px;float:none;}
#producto1 { background-image:url('imagen_novedad/minis/m_2deabril_732.jpeg'); }
#producto2{ background-image:url('imagen_novedad/ajedrez_528_528.jpeg'); }
#producto3 {background-image:url('imagen_novedad/borracho_752.jpeg'); }
}
@media screen and (min-width:400px ) and (max-width: 800px){
.producto{ height:250px; width:250px; float:none;}
#producto1 {background-image:url('imagen_novedad/borracho_752.jpeg'); }
#producto3{ background-image:url('imagen_novedad/ajedrez_528_528.jpeg'); }
#producto2 { background-image:url('imagen_novedad/minis/m_2deabril_732.jpeg'); }
}
@media screen and (min-width:801px ){
.producto{ height:350px; width:350px;}
#producto1{ background-image:url('imagen_novedad/ajedrez_528_528.jpeg'); }
#producto2 {background-image:url('imagen_novedad/borracho_752.jpeg'); }
#producto3 { background-image:url('imagen_novedad/minis/m_2deabril_732.jpeg'); }
}
Hablando responsive-design, definí tres instancias, y además tres productos, para que tengas un ejemplo de como aplicarlo a más de uno. Por eso hago uso de los id y de class.
Es 100% posible que esto sea una chapuza, pero creo que funciona.
Te dejo un
enlace donde podrás verlo, pero ten en cuenta que lo dejaré cuanto mucho una semana.
Para ver como funciona no tienes más que achicar la ventana del navegador.
Probado en Chrome, FF, Opera, Safari, IE9, donde +- funciona.
Saludos