div - width height css

Altura máxima y anchura máxima solo con CSS

Question

Primer post para mi aquí.

Estoy usando un div para recortar imágenes en miniatura todas en las mismas proporciones (180wx170h). Me estoy quedando atascado cuando trato con el retrato así como con las imágenes del paisaje. Si estoy usando esto, está bien para imágenes de estilo retrato:

.crop img {max-height:170px; width:auto} 

.. y está bien para imágenes de estilo paisaje:

.crop img {max-width:180px; height: auto;} is fine for landscape style images.  

Así que básicamente quiero recortar los lados si paisaje y arriba / abajo si retrato. Algo así como una altura máxima y una anchura máxima priorizadas.

Sé que esto podría hacerse fácilmente con PHP, pero realmente solo conozco CSS, así que esa sería mi primera preferencia.

Necesito mantener la relación de aspecto de la imagen.

Answer 1

Tienes la respuesta en ti!

Tratar:

.crop img {max-height: 170px; max-width: 180px;}

Answer 2

Esto podría ser un poco tarde, pero encontré envolver la imagen en <figure> escala la imagen manteniendo la relación de aspecto.

Answer 3

Las soluciones después de pasar por un montón de otras ''soluciones''.

max-width:100%;
max-height:100%;
height: auto;
width:auto;

Answer 4

Tu podrías intentar

.crop img {max-height:170px; max-width:180px;}

Como max-height max-width máxima son máximas, debería funcionar. El navegador hará que la imagen sea lo más grande posible, sin pasar por encima de sus dimensiones.

Tenga en cuenta que esto no se ha probado, pero se basa en esta página de W3Schools .

¡¡Espero que esto ayude!!

Answer 5

Edición 2019:

Si desea mantener las etiquetas <img> , mire en la propiedad css de object-fit , su compatibilidad con los navegadores es bastante buena.

Y si desea mantener la relación de aspecto en el cambio de ancho, intente padding-hack .

Según tengo entendido, usted tiene bloques de 180x170 px y desea llenarlos completamente con imágenes. Intente mover las imágenes al fondo y use background-size:cover .

Demostración http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Tenga en cuenta que esta solución no funciona en IE8 y más adelante.

Answer 6

Edición: He mejorado la solución, consulte aquí: https://.com/a/34774905/1663572

Estoy usando esta solución, que encontré, cuando intentaba ajustar y centrar las imágenes en cuadrados (o lo que sea). Es brillante en combinación, donde establece el fondo de relleno y la altura 0 en su contenedor, lo que lo hace sensible con una proporción fija.

Funciona en IE9 y superior. Para IE8 y debajo de algunos hacks CSS necesarios.

HTML

.container {
    height: 0;
    padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
}
.container img {
    display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 75%;
    width: auto;
    height: auto;

    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Fallback for IE8 */
@media all/0 { 
    .container img {
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

Pruébelo aquí: http://jsfiddle.net/thiemeljiri/uhdm4fce/4/

Aviso: si usa bootstrap, cambie la clase .container a otra cosa.