transicion - Haciendo todas las fotos cuadradas a través de css

imagenes en html5 y css3

Question

Estoy tratando de hacer una serie de fotos en fotos cuadradas. Pueden ser rectangulares horizontalmente (es decir, 600x400) o verticalmente (400x600), pero quiero que sean 175x175 de cualquier manera. Mi idea era la de la altura máxima o la anchura máxima del lado más pequeño, y no permitir el desbordamiento más allá de 175px en el lado más grande ... sin embargo, estoy teniendo problemas con él.

¿Es esto posible con css?

A continuación se muestra mi intento, pero sigue dando rectángulos:

<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>

Answer 1

Determine el ancho y el alto de la imagen, luego active la clase vertical u horizontal de la imagen. Si el retrato hace {height:175px; width:auto} {height:175px; width:auto} . Si paisaje, invertir altura y anchura.

Answer 2

Está bien, tengo esto.

No sé si es demasiado tarde o qué, pero he encontrado una forma 100% pura de crear miniaturas cuadradas. Es algo por lo que he estado tratando de encontrar una solución durante bastante tiempo y no he tenido suerte. Con algo de experimentación, lo tengo funcionando. Los dos atributos principales que se utilizan son OVERFLOW: HIDDEN y WIDTH / HEIGHT: AUTO.

De acuerdo, esto es lo que hay que hacer:

Digamos que tienes un lote de imágenes de diferentes formas y tamaños, algo de paisaje, algo de retrato, pero todas, por supuesto, rectangulares. Lo primero que debe hacer es clasificar los enlaces de imágenes (miniaturas) por retrato o paisaje, usando un selector de clase. Bien, digamos que solo quieres crear dos miniaturas para hacer esto más simple. tienes:

img1.jpg (retrato) y img2.jpg (paisaje)

Para HTML se vería así:

<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>

Por lo tanto, en este punto, dado que aún no hay css, el código anterior le dará su imagen de tamaño completo como una miniatura que se vincularía a la misma imagen de tamaño completo. Bien, aquí está el css tanto para el retrato como para el paisaje. Hay dos declaraciones para cada uno (el enlace y la imagen del enlace):

.landscape {
float:left;
width:175px;
height:175px;
overflow:hidden;
}
.landscape img{
width:auto;
height: 175px;
}
.portrait {
float:left;
width:175px;
height:175px;
overflow:hidden;
}
.portrait img {
width:175px; <-- notice these
height: auto; <-- have switched
}

Las cosas más importantes son el ancho y la altura y el desbordamiento: oculto. Flotar a la izquierda no es necesario para que esto funcione.

En la declaración de miniatura de paisaje (.landscape) el cuadro delimitador se establece en 175 x 175 y el desbordamiento se establece en oculto. Eso significa que cualquier información visual más grande que la que contiene 175px cuadrada se ocultará de la vista.

Para la declaración de imagen de paisaje (.landscape img), la altura se fija en 175px, que cambia el tamaño de la altura original y el ancho se establece en automático, que cambia el ancho del tamaño original, pero solo hasta el punto en que se relaciona con el cuadrado delimitador, que En este caso es de 175px. Entonces, en lugar de embutir el ancho en el cuadrado, simplemente llena el cuadrado y luego cualquier información visual adicional en el ancho (es decir, el desbordamiento) se oculta con el desbordamiento: oculto.

Funciona de la misma manera para retrato, solo que el ancho y la altura se cambian, donde la altura es automática y el ancho es 175px. Básicamente, en cada caso, cualquier dimensión que exceda de la otra se establece en automática, porque, naturalmente, la dimensión más grande sería la que se desbordaría fuera de las dimensiones de la miniatura (175px x 175x).

Y si desea agregar márgenes entre los pulgares, por ejemplo, un margen blanco de 5px, puede usar la propiedad de borde, de lo contrario no habrá margen donde la información se esté desbordando.

Espero que esto tenga sentido.

Answer 3

Esto podría ayudar.

CSS:

.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
}

HTML:

<div class="image"></div>

Esto funcionó para mí. Solo pon la URL a la imagen dentro del div.

Answer 4

Puede configurar el ancho / alto del div padre y luego configurar la etiqueta img del niño en ancho: 100%; altura: auto;

Eso reducirá la escala de la imagen para tratar de ajustar al padre con la relación de aspecto en mente.

También puede configurar la imagen como una imagen de fondo en el div. Luego, si puede usar css3, puede meterse con la propiedad de tamaño de fondo. Sus atributos son: contener, cubrir o una altura específica (50%, 50%) (175px, 175px) También puede intentar centrar la imagen con la posición de fondo

<div style="background-image:url(some.png); background-size: cover; background-position: 50%">

Answer 5

Recomiendo encarecidamente el plugin de jQuery NailThumb para cualquiera que esté buscando hacer esto. Te permite crear miniaturas cuadradas sin distorsión. http://www.garralab.com/nailthumb.php