CSS: ¿ancho o alto del 100% manteniendo la relación de aspecto?

Question

Actualmente, con ESTILO, puedo usar width: 100% y auto en la altura (o viceversa), pero todavía no puedo restringir la imagen a una posición específica, ya sea demasiado ancha o demasiado alta, respectivamente.

¿Alguna idea?

Answer 1

Si solo define una dimensión en una imagen, la relación de aspecto de la imagen siempre se conservará.

¿El problema es que la imagen es más grande/más alta de lo que usted prefiere?

Puede ponerlo dentro de un DIV que esté configurado con el alto/ancho máximo que desea para la imagen, y luego configurar el desbordamiento: oculto. Eso recortaría cualquier cosa más allá de lo que quieras.

Si una imagen es 100% ancha y alta: auto y cree que es demasiado alta, eso es específicamente porque se conserva la relación de aspecto. Necesitará recortar o cambiar la relación de aspecto.

Proporcione más información acerca de lo que está tratando de lograr específicamente y trataré de ayudarlo más.

--- EDITAR basado en la retroalimentación ---

¿Está familiarizado con los max-width y max-height propiedades? Siempre puedes establecerlos en su lugar. Si no se establece ningún mínimo y se establece una altura máxima y el ancho a continuación, su imagen no se distorsiona (se conserva la relación de aspecto) y no va a ser más grande que cualquiera que sea la dimensión es más larga y alcanza su máximo.

Answer 2

Al configurar la propiedad CSS max-width en 100%, una imagen llenará el ancho de su elemento parental, pero no se reproducirá más grande que su tamaño real, conservando así la resolución.

Configurando la propiedad height en auto mantiene la relación de aspecto de la imagen, utilizando esta técnica permite anular la altura estática y permite que la imagen se flexione proporcionalmente en todas las direcciones.

img { 
    max-width: 100%; 
    height: auto;  
} 

Answer 3

Algunos años después, buscando el mismo requisito, encontré una opción de CSS usando fondo de tamaño.

Se supone que funciona en los navegadores modernos (IE9 +).

<div id="container" style="background-image:url(myimage.png)"> 
</div> 

Y el estilo:

#container 
{ 
    width: 100px; /*or 70%, or what you want*/ 
    height: 200px; /*or 70%, or what you want*/ 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

La referencia: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Y la demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Answer 4

Se trata de una solución muy sencilla que se me ocurrió después de seguir el enlace de Conca y mirando el tamaño de fondo. Sopla la imagen hacia arriba y luego la coloca centrada en el contenedor externo sin escalarlo.

<style> 
#cropcontainer 
{ 
    width: 100%; 
    height: 100%; 
    background-size: 140%; 
    background-position: center; 
    background-repeat: no-repeat; 
} 
</style> 

<div id="cropcontainer" style="background-image: url(yoururl); /> 

Answer 5

Lo mejor es usar auto en la dimensión que debe respetar la relación de aspecto.Si no se establece la otra propiedad de automóviles, la mayoría de los navegadores de hoy en día asumirán que desea respetar la relación de aspecto, pero no todos ellos (IE10 en Windows Phone 8 no lo hace, por ejemplo)

width: 100%; 
height: auto; 

Answer 6

Uso JQuery más o menos, ya que CSS es un concepto erróneo general (las innumerables preguntas y discusiones aquí sobre los objetivos de diseño simple lo demuestran).

No es posible con CSS hacer lo que parezca desear: la imagen debe tener un ancho del 100%, pero si este ancho resulta en una altura que es demasiado grande, se aplicará una altura máxima, y ​​por supuesto la las proporciones correctas deben ser preservadas.

Answer 7

Creo que esto es lo que estás buscando, lo estaba buscando, pero luego lo recordé porque encontré el código.

background-repeat: repeat-x; 
background-position: top; 
background-size:auto; 
background-attachment: fixed; 

evolución digital está en camino.

Answer 8

Tenía el mismo problema. El problema para mí fue que la propiedad height también se define ya en otro lugar, fijado de esta manera:

.img{ 
    max-width: 100%; 
    max-height: 100%; 
    height: inherit !important; 
} 

Answer 9

no saltar en una cuestión de edad, pero ...

#container img { 
     max-width:100%; 
     height:auto !important; 
} 

A pesar de que esto es no es apropiado, ya que usa la importante función de anulación de la altura, si está utilizando un CMS como WordPress que establece el alto y el ancho para usted, esto funciona bien.

Answer 10

Una de las respuestas incluye background-size: contiene declaración css que me gusta mucho porque es una afirmación directa de lo que quiere hacer y el navegador simplemente lo hace.

Desafortunadamente tarde o temprano tendrá que aplicar una sombra que lamentablemente no funcionará bien con las soluciones de imagen de fondo.

Digamos que usted tiene un contenedor que es sensible pero tiene límites bien definidos para ancho y alto mínimos y máximos.

.photo { 
    max-width: 150px; 
    min-width: 75px; 
    max-height: 150px; 
    min-height: 75px; 
} 

y el contenedor tiene una img que deben ser conscientes de los píxeles de la altura del recipiente con el fin de evitar una imagen muy alta que se desborda o se recorta.

La img también debe definir un ancho máximo de 100% para permitir primero el procesamiento de anchuras más pequeñas y, en segundo lugar, su porcentaje que lo hace paramétrico.

.photo > img { 
    max-width: 100%; 
    max-height: 150px; 
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1); 
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,1); 
    box-shadow:   0 0 13px 3px rgba(0,0,0,1); 
} 

nota que tiene una sombra agradable;)

Disfrute de un ejemplo en vivo en este violín: http://jsfiddle.net/pligor/gx8qthqL/2/

Answer 11

lo uso para un recipiente rectangular con altura y ancho fijo, pero con imágenes de diferentes tamaños.

img { 
    max-width: 95%; 
    max-height: 15em; 
    width: auto !important; 
} 

Answer 12

solución simple:

min-height: 100%; 
min-width: 100%; 
width: auto; 
height: auto; 
margin: 0; 
padding: 0; 

Por cierto, si se desea centrar en un contenedor div padre, puede agregar esas propiedades CSS:

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

en realidad debería funciona como se esperaba :)

Answer 13

solución de trabajo elegante simple:

img { 
    width: 600px; /*width of parent container*/ 
    height: 350px; /*height of parent container*/ 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 14

Eso no es posible sin JS, así que escribió pequeño script:

var resize_images; 

resize_images = function(resize) { 
    var images, resize_process, resize_single; 
    if (resize == null) { 
    resize = false; 
    } 
    resize_single = function(that) { 
    if (that.height() <= 200) { 
     return that.css({ 
     'width': 'auto', 
     'height': '100%' 
     }); 
    } else { 
     return that.css({ 
     'width': '100%', 
     'height': 'auto' 
     }); 
    } 
    }; 
    resize_process = function(that) { 
    that.css({ 
     'width': 'auto', 
     'height': 'auto' 
    }); 
    resize_single(that); 
    return resize_single(that); 
    }; 
    images = $('.image img'); 
    return images.each(function() { 
    if (resize) { 
     return resize_process($(this)); 
    } else { 
     return $(this).on('load', function() { 
     return resize_process($(this)); 
     }).each(function() { 
     if(this.complete) $(this).trigger('load'); 
     }); 
    } 
    }); 
}; 

resize_images(); 

$(window).resize(function() { 
    return resize_images(true); 
}); 

CoffeeScript

Y SCSS:

.image { 
    position: relative; 
    overflow: hidden; 
    width: 50%; 
    height: 200px; 
    float: left; 

    img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    } 
} 

Usted todavía tiene que seguir con la anchura o la altura de Bloque padre. Y este código aumentará la imagen si el tamaño es más pequeño que el tamaño del bloque principal.

jsfiddle.net

Answer 15

probar esto

background-size: 100% 100%; 
    background-image: url("PATH_TO_IMAGE"); 
    background-repeat: no-repeat;