Supongamos que tiene un montón de imágenes que desea mostrar y el objetivo es colocarlas de borde a borde en la ventana del navegador sin espacios. Solo porque crees que sería genial. Son de todos los tamaños diferentes. No le importa si se les cambia el tamaño, pero deben mantener su relación de aspecto. Como esto:
Agradable y sin problemas
Idealmente, lo mantenemos bastante frío en el marcado, como:
<section id="photos">
<img src="https://css-tricks.com/seamless-responsive-photo-grid/images/cat-1.jpg" alt="Cute cat">
<img src="images/cat-2.jpg" alt="Serious cat">
...
</section>Sin CSS en absoluto, las imágenes se alinearán en una fila ya que son esencialmente bloques en línea:
Ríos de espacio en blanco
Pero eso no es exactamente lo que queremos. Su mente puede ir directamente a alguna solución de JavaScript. Posiblemente el proyecto de albañilería genial. El problema con la opción de JavaScript es que se basa en el evento window.resize que (al menos para mí) siempre hace que las páginas se sientan lentas (incluso si estás a la moda y haces lo que no rebota).
Podemos hacer que esto funcione de la manera que queremos con solo CSS. Lo que necesitamos son columnas verticales en las que colocar las imágenes. De esa forma, las imágenes se apilarán unas sobre otras, y el problema de la altura es discutible.
Podríamos envolver el mismo número de imágenes en divs flotantes, pero eso no es muy fácil de mantener equilibrado. El truco va a ser utilizar Albañilería CSS, donde las columnas verticales se hacen a través de la propiedad CSS3 column-count. Sí, literalmente, la cosa en la que puede establecer texto en columnas estrechas automáticamente.
Por lo tanto, siempre que el padre con las columnas múltiples sea tan ancho como la ventana del navegador (predeterminado) y el column-gap es 0, lo hicimos a la sombra. Al establecer el ancho de la imagen al 100%, ocuparán exactamente el ancho de una columna.
Aquí está el CSS:
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}Pero, ¿qué pasa cuando la ventana del navegador comienza a reducirse? 5 columnas pueden ser ideales para una ventana de navegador muy grande, pero demasiadas para una ventana de navegador más pequeña (5 imágenes una al lado de la otra pueden resultar demasiado estrechas). Podemos solucionar el problema muy fácilmente haciendo que las consultas de medios prueben el ancho del navegador y ajusten el número de columnas en consecuencia.
@media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}Fannnnnncy.
Manifestación
Vea la cuadrícula de fotos receptiva sin fisuras de la pluma de Programar Plus(@ css-tricks) en CodePen.
Lo bueno de esta técnica para mí es que, dado que es CSS puro, todo sucede muy rápido y sin problemas. Puede cambiar el tamaño de su navegador y ver cómo las cosas cambian de tamaño y se mueven muy rápidamente.
Sobre qué, ya sabes.
En lo que respecta al soporte del navegador, es bastante bueno, excepto IE, donde solo funciona en 10+. De lo contrario: Firefox 3.6+, Opera 11.1+, Safari 4+, Chrome 10+. Incluso podría ser un poco más profundo que eso.
Puede omitir un recurso alternativo porque, lo que sea que no sea tan malo, solo tiene algunos espacios en blanco. O puede usar el combo Modernizr / YepNope (Modernizr puede probarlo como csscolumns) para cargar jQuery Masonry y ver qué puede hacer con eso. O puede probarlo y enrollar su propio JS que cuenta las imágenes y las divide en grupos iguales y envuelve divs flotantes a su alrededor. Lo que te venga bien.
¡¡Gatos super lindos !!
Totalmente. Son de LoremPixel. Para la demostración, tomamos fotos en tamaños aleatorios con jQuery:
function getRandomSize(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
for (var i = 0; i < 25; i++) {
var width = getRandomSize(200, 400);
var height = getRandomSize(200, 400);
$('#photos').append('<img src="https://www.lorempixel.com/'+width+"https://css-tricks.com/"+height+'/cats" alt="pretty kitty">');
}