Actualmente estoy trabajando en mi primer responsive webdesign trabajando con Bootstrap 3.

Lo que ahora tengo es todo lo ancho de la cuadrícula de imágenes de perfil de usuario. Estas imágenes tienen un contenedor primario que debe estar completamente lleno por la imagen. El contenedor primario debe tener una altura fija debido a la solicitada de diseño.

El problema es: el Uso de CSS sólo sé cómo se adapta a la anchura o la altura, no dependiendo del tamaño del contenedor.

Puede ver el problema en este jsfiddle:
http://jsfiddle.net/usD2d/

li /* container */ {
    display: block;
    overflow: hidden;
    float: left;
    width: 25%;
    height: 100px; /* something fixed */
}
li img {
    width: 100%;
    min-height: 100%; /* destroys aspect ratio */
}

Si usted tiene una gran pantalla, las imágenes se ajustan perfectamente. Tener dispositivos más pequeños que las imágenes pierden su relación de aspecto.

Seguramente yo podría usar @media(min-width) y cambiar la img de ancho a la altura, pero debido al uso de BootStrap y tiene un diseño dinámico (el colapso de la barra lateral, etc) esto podría llegar a ser muy complicado.

Hay alguna CSS única solución? Si no, hay una gran jQuery solución tal vez que también proporciona un punto de enfoque donde para mantener el foco en cuando los cultivos?

Muchas gracias de antemano!

  • Trate de añadir margin:0px; en li‘s css Espero Que te ayudarán.
  • Trate de hacer esto, suena como que podría tener el mismo problema acabo de encontrar una solución para: sitepoint.com/… Si es así, hágamelo saber y le puede expandir esto a una respuesta completa.
  • Oh, este fue el 2014, no en el 2015 🙂 tal vez el comentario de ayuda a alguien más, al menos.

2 Comentarios

  1. 4

    Si quieres llenar todo el espacio con el recorte de imagen es, la relación se conservan, pero la imagen será parcialmente oculto. vertical-align y margen negativo puede ser utilizado.

    ejemplo: http://jsfiddle.net/usD2d/2/ mantener el centro de la imagen en el centro(como lo haría un background-position: center center ;.

    ul {
        width: 100%;
    }
    li {
        display: block;
        float: left;
        width: 24%;
        height: 150px;
        overflow: hidden;
        border: 1px solid black;
        text-align:center;/* set image in center */
        line-height:150px;/* set image or text right in middle;*/
    }
    img {
        min-width: 100%;
        vertical-align:middle;/* okay see it in middle , but you can tune this */
        margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
    }

    el margen negativo reducir prácticamente el tamaño de imagen que se center(text-align ) y sentarse en la línea de base establecida por línea-altura.

    Este CSS de cultivo.

  2. 0

    Creo que quieres la imagen para determinar el ancho de la <li>. He quitado el width: 25%; de la propiedad, y sus imágenes mantienen su relación de aspecto en su violín. Por lo tanto, cambiar

    li /* container */ {
    display: block;
    overflow: hidden;
    float: left;
    width: 25%;
    height: 100px; /* something fixed */
    }

    a

    li /* container */ {
    display: block;
    overflow: hidden;
    float: left;
    height: 100px; /* something fixed */
    }

Dejar respuesta

Please enter your comment!
Please enter your name here