attribute - Mosaico de imágenes HTML/CSS.

title css

Question

Quiero hacer un diseño de imagen con imágenes de retrato dentro de un div con una relación de aspecto fija de 3:2 . El tamaño de las imágenes es de 327x491px .

El principal problema son los espacios no deseados entre las imágenes. ¿Cómo puedo alinear las imágenes como un mosaico usando solo HTML / CSS ?

HTML:

<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div> 

CSS:

._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */

jsfiddle

Answer 1

El posicionamiento absoluto no parece ser la mejor opción si desea mantener dinámicamente las mismas posiciones y proporción.

El flujo de HTML nativo suele ser el camino a seguir. El posicionamiento absoluto es como las tabletas de vitaminas. Lo usas cuando lo necesitas, pero no es tu alimento principal. ;)

Lo que yo haría es:

1. simplemente coloque el contenedor como desee (centrado, por ejemplo) y ajuste su ancho con el porcentaje de la ventana / sección en la que se encuentra.

2. Luego, coloca tus ._pictures1-xx divs en su interior y ajusta el ancho de las fotos utilizando el porcentaje del contenedor. La altura mantendrá la relación automáticamente (*)

3. Luego haría que los ._pictures1-xx divs muestren "inline-block" y floten "left". Luego, un pequeño div con "ambos" claros después de la última foto y cierra el contenedor.

(*) recordatorio: el valor predeterminado de ancho o alto es "auto", es decir, cualquier tamaño que mantenga la relación de imagen cuando el otro es un valor de px /%. Los márgenes horizontales se vuelven nativos dinámicamente cuando se define la altura de tus fotos, para mantener las proporciones de tus fotos. Si define el ancho y deja la altura automáticamente, entonces la altura es dinámica para mantener la proporción de las fotografías, y los márgenes no cambian.

Espero que esto haya sido útil.

Answer 2

En mi experiencia: si solo establece la dimensión de la altura o el ancho ( no ambos ), la imagen se escalará en consecuencia.

Answer 3

En primer lugar, para eliminar el espacio entre las imágenes, simplemente elimine el conjunto a ''0'' y el margin .

Luego, para lograr lo que desea, puede usar o combinar esas estrategias:

1) Asigne un tamaño fijo en píxeles a uno de los tamaños: el otro se escalará automáticamente.

2) Puede calcular el tamaño que necesita a través de javascript y asignar el valor dinámicamente. Por ejemplo, con jQuery framework:

$(img).each(function(){
 var h = this.height();
 var w = this.width();


 if (w => h){
  this.attr(''width'', w*0.66);
}
else {
  this.attr(''height'',h*.066);
}
});

3) Puede usar la imagen de fondo css para divs y background-size: cover o background-size: contain lo que necesite, estática o dinámicamente ( documentos w3c)

Answer 4

Envuelve tu imagen con un div. Establecer ancho y alto para el div en función de la relación. Dar solo altura para la imagen. Si desea que la imagen ocupe solo el espacio que necesitan, use la pantalla: en línea también

Answer 5

Me gustaría dar una solución simple.

Simplemente puede envolver la etiqueta img con DIV. Y deberías aplicar CSS a este DIV envuelto.

Código de ejemplo

En lugar de esto

<img src=''some_image.jpg''> Utilice debajo de tipo de estructura

<div class="img_wrapper">
     <img src=''some_image.jpg''>
</div>

CSS

//  suggestion: target IMG with parent class / ID
.img_wrapper img{
    width: 100%; 
    height: auto;
} 

Todas las imágenes dentro de la clase .img_wrapper tendrían la relación de aspecto adecuada.

Answer 6

Para hacer una respuesta correcta, primero voy a aclarar los requisitos:

1. Todas las imágenes tienen la misma relación de aspecto: 3/2
2. las imágenes no deben ser recortadas
3. no hay espacio entre las imágenes
4. hacer un mosaico de imagenes

Puedes tener miles de posibilidades para mostrar tus imágenes. Voy a hacer un diseño simple que debería mostrarte la manera de construir el tuyo.

Aquí tiene un FIDY FIDDLE de lo que puede lograr y esto es lo que parece:

Primer paso: pensar, calcular y pensar de nuevo.

Primero: para hacerlo simple, digamos que sus imágenes pueden tener 3 tamaños (cambié el tamaño de la imagen en 1 px para facilitar los cálculos):

1. grande: 328*492px
2. medio, 1/2 de grande: 164*246px
3. pequeño, 1/4 de grande: 82*123px

Segundo: Como sus imágenes son todos retratos y su contenedor tiene la misma altura que la imagen grande, tendrá que trabajar con columnas de altura 492px que pueden tener 3 anchos:

1. grande: 328px ancho, pueden mostrar imágenes de todos los tamaños
2. medio: 328/2 = 164px ancho, pueden mostrar imágenes medianas y pequeñas
3. pequeño: 327/4 = 82px ancho, solo pueden mostrar imágenes pequeñas

Tercero: ¿Cuántas columnas y qué tamaños de imagen? Depende de usted, tendrá que elegir según el ancho total de su contenedor y el número de imágenes que desea mostrar.

Pero en su violín, el contenedor ( ._pictures1 ) tiene un ancho de 935px que será imposible de lograr con los anchos de columna elegidos justo antes.

935/82 = 11.4024...

Lo más cercano que puede obtener es un contenedor de 82*12 = 984px ancho.

Tendrá que cambiar el ancho del contenedor o cambiar los tamaños de las imágenes y columnas para que se ajusten al ancho inicial.

O (spoiler) puede trabajar con porcentajes, esto puede ser una alternativa especialmente si necesita que su diseño sea receptivo, pero esto puede complicarse y estoy tratando de simplificar las cosas.

Como estoy seguro de que tienes curiosidad y quieres comprobarlo, aquí hay un ejemplo de diseño en una

Mosaico responsivo de la imagen.

Siguiente paso: diseñar el diseño

Use un bolígrafo, photoshop o cualquier otra herramienta que se adapte a usted, si usted es realmente bueno, incluso puede usar su cerebro para representar mentalmente el diseño que desea.

Diseñé la imagen que puedes ver en el momento de la respuesta.

Como dije antes, hay muchas posibilidades de diseño (cantidad de columnas y tamaños de imágenes en esas columnas), así que para el ejemplo, elegí 2 columnas grandes 1 mediana y 2 pequeñas

328*2+164+82*2 = 984px ( = width of container so it can fit!)

Último paso: empieza a codificar!

Puedes ver el resultado en este

VIOLÍN

Este diseño se basa en floats por lo que debemos definir el ancho, la altura del contenedor, las columnas y las imágenes para que todos puedan encajar uno al lado del otro (como ya lo hemos pensado con el cálculo y el diseño, es fácil).

CSS:

#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:493px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

Luego el marcado HTML:

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="http://www.lorempixum.com/327/491/abstract" alt="" />
            <img src="http://www.lorempixum.com/g/327/491" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        </div>
        <div class="medium_img">
            <img src="http://www.lorempixum.com/g/327/491/business" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
        <div class="small_img">
            <img src="http://www.lorempixum.com/g/327/491/food" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
            <img src="http://www.lorempixum.com/327/491/cats" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="http://www.lorempixum.com/327/491/fashion" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
    </div>
</div>

Answer 7

Prueba algo como esto

Estilo

body{
    background: black;
    width:80%;
    margin:5em auto;
    display:block;
}
.wrapper{
    background:#FFF;
    float:left;
}   

.container{
    height:476px;
    width:192px;
    display:inline-block;
    float:left;
}
.small{
    height:188px;
    width:125px;
    display:block;
    margin:0 auto;
    background:#333;
}
.medium{
    background:#666;
    width:192px;
    height:288px;
}
.large{
    height:476px;
    width:200px;
    background:#999;
    display:inline-block;
    float:left;
}

Esto es HTML

<div class="wrapper">
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
        <div class="small">
            <div class="small_inner">
            </div>
        </div>  
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">

            <div class="medium_inner">
            </div>
        </div>
    </div>
</div>

Answer 8

Si configura una dimensión o la otra, pero no ambas, las imágenes deben cambiar de tamaño de manera fluida. Intenta establecer solo el ancho a una unidad porcentual.

Answer 9

aspectRatioResizeImg
Este es un complemento de jQuery que permite cambiar el tamaño de una imagen conservando su relación de aspecto, ajustando un contenedor. Opcionalmente, se puede cambiar el tamaño del contenedor para que coincida con la relación de aspecto de la imagen.
https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

Answer 10

img{
 height: auto;
 width: 50%
}