Hacer todas las fotos de la plaza a través de css

Estoy tratando de hacer una serie de fotos en la plaza de fotos. Pueden ser rectangular horizontal (es decir, 600×400) o verticalmente (400×600), pero quiero llegar a ser 175×175 de cualquier manera. Mi pensamiento fue para max-altura o el ancho máximo el lado más pequeño, y no permitir que se desborde más allá de 175 px por el lado mayor…sin embargo, estoy teniendo problemas con él.

Es esto posible con css?

A continuación es mi intento, pero dando rectángulos todavía:

<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>
¿Te importa la relación de aspecto?
Yo no quiero hacer width=175 altura=175 como se verá realmente distorsionada. Pero si ligeramente distorsionada, eso está bien.

OriginalEl autor user749798 | 2012-11-22

5 respuestas

  1. 25

    Usted puede configurar el ancho/altura del div padre, a continuación, establezca el hijo de la etiqueta img para width:100%; height: auto;

    Que se escala la imagen de abajo para intentar adaptarse a los padres con la relación de aspecto en mente.

    También puede establecer la imagen como imagen de fondo en el div
    Entonces, si usted puede utilizar css3 puede meterse con el fondo de tamaño de la propiedad.
    Sus atributos son: contener, cubierta, o un específico altura (50%, 50%) (175 px, 175 px)
    También puede intentar centro de la imagen con background-position

    <div style="background-image:url(some.png); background-size: cover; background-position: 50%">
    alguna razón img no se está cargando.

    OriginalEl autor Jesse

  2. 4

    Bueno tengo este.

    No sé si es demasiado tarde o qué, pero me he encontrado con un 100% puro CSS camino de la creación de la plaza de las miniaturas. Es algo que he estado tratando de encontrar una solución para bastante tiempo y no ha tenido nada de suerte. Con un poco de experimentación, ya lo tengo funcionando. Las dos principales atributos a utilizar son OVERFLOW:HIDDEN y ANCHURA/ALTURA:AUTO.

    Bueno aquí está lo que debe hacer:

    Digamos que usted tiene un lote de imágenes de diferentes tamaños y formas, algunos de paisaje, retratos, pero todos, por supuesto, rectangular. La primera cosa a hacer es clasificar los enlaces de imágenes (thumbnails) ya sea horizontal o vertical, el uso de un selector de clase. Bueno, así que digamos que usted sólo desea crear dos miniaturas, para hacer esto más simple. usted tiene:

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

    Para HTML tendría este aspecto:

    <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>

    Así, en este punto ya que no hay css sin embargo, el código anterior podría dar a su tamaño completo de la imagen como una imagen en miniatura que enlace a la misma de tamaño completo de la imagen. A la derecha, así que aquí está el css para que, tanto en el retrato y el paisaje. Hay dos declaraciones de cada uno (el link y el link de la imagen):

    .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 la anchura y la altura y el overflow:hidden. Flotar a la izquierda no es necesario para este trabajo.

    En el paisaje en miniatura de la declaración.paisaje) el cuadro delimitador se establece a 175 x 175 y el desbordamiento se establece en oculto. Esto significa que cualquier información visual más grande que el que contiene 175 px plaza se oculta de la vista.

    Para la imagen de un paisaje de la declaración.paisaje img), la altura es fija en 175 px, que cambia el tamaño de la original de la altura y la anchura se establece en automático, que cambia el tamaño de la anchura original, pero sólo hasta el punto de la relación con la delimitación de la plaza, que en este caso es de 175 px. Así que en lugar de smush el ancho hacia abajo en la plaza, simplemente llena la plaza y, a continuación, cualquier exceso de información visual en el ancho (es decir, el desbordamiento) se oculta con el overflow:hidden.

    Funciona de la misma manera para el retrato, sólo que la anchura y la altura es de conmutación, donde la altura es automático y la anchura es de 175 px. Básicamente, en cada caso, sea cual fuere la dimensión supera a la otra en el auto, porque, naturalmente, la dimensión más grande sería el que desbordaría fuera de la miniatura dimensiones (175 px x 175x).

    Y si quieres añadir márgenes entre los pulgares, por ejemplo, un 5px margen blanco, puede utilizar la propiedad border, de lo contrario no habrá margen donde la información es desbordante.

    Espero que esto tenga sentido.

    ¿Cómo sé que la imagen es vertical y que es paisaje con solo css?
    Este funciona como se anuncia. Le recomendamos * img clases para utilizar el 100% en lugar de píxeles. También, esto no va a utilizar el centro de la imagen de origen.
    usted podría utilizar algo parecido a PHP la función getimagesize ().
    Entonces ya no es un 100% puro CSS solución.

    OriginalEl autor

  3. 0

    Determinar la anchura y la altura de la imagen, a continuación, active retrato o paisaje de la clase de la imagen. Si el retrato hacer {height:175px; width:auto}. Si el paisaje, la inversa de la altura y la anchura.

    Por favor enviar el código.

    OriginalEl autor technoarya

  4. -1

    Yo muy sugerencia de que el NailThumb plugin de jquery para cualquier persona que está buscando para hacer esto. Esto permite que usted para crear la plaza de miniaturas sin distorsión. http://www.garralab.com/nailthumb.php

    Hm… El único no-CSS respuesta es aceptado?

    OriginalEl autor user749798

  5. -7

    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í. Sólo tienes que poner la URL de la imagen en el interior de la div.

    Usted entiende mal la pregunta!

    OriginalEl autor Tomas Rekstad

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *