Hola a todos,
Me ha surgido un nuevo problema. Estoy diseñando la página con digamos dos filas horizontales y cada una de ellas con tres imágenes. Cada una de las imágenes tiene un tamaño aproximado de 522px x 710px. La idea es que todo ocupe todo el ancho de la pantalla y hacer un poco de scroll down para ver completa la segunda fila.
1-¿Cómo puedo hacer para que con ese tamaño las img se adapten a las distintas resoluciones de pantalla?
2-¿Cómo puedo hacer además que se mantengan siempre en el centro?
HTML:
<body>
<div class="container">
<div class="row1">
<img src="img/710x522.png" class="Product-1"/>
<img src="img/710x522.png" class="Product-2"/>
<img src="img/710x522.png" class="Product-3"/>
</div>
<div class="row2">
<img src="img/710x522.png" class="Product-4"/>
<img src="img/710x522.png" class="Product-5"/>
<img src="img/710x522.png" class="Product-6"/>
</div>
</div>
</body>
CSS:
.container {
width: 100%;
margin: 0 auto;
text-align: center;
}
.row1 {
position: absolute;
border: solid;
top: 0;
left: 0;
width: 100%;
height: 522px;
margin: 0 auto;
text-align: center;
display: block;
}
.Product-1 {
border: solid;
margin: 0 auto;
float: left;
display: inline-block;
}
.Product-2 {
border: solid;
margin: 0 auto;
float: left;
display: inline-block;
}
/*Y así sucesivamente con los 6 productos*/