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

Actualmente, con ESTILO, puedo usar width: 100%y autoen 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.

¿Algunas ideas?

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

Puede ponerlo dentro de un DIV que esté configurado a la altura / anchura máxima que desea para la imagen, y luego configurar el desbordamiento: oculto. Eso recortaría cualquier cosa más allá de lo que quieres.

Si una imagen es 100% ancha y alta: automática y cree que es demasiado alta, eso se debe específicamente a que se conserva la relación de aspecto. Tendrá que recortar o cambiar la relación de aspecto.

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

--- EDICION BASADA EN COMENTARIOS ---

¿Está familiarizado con las propiedades max-width y max-height ? Siempre puedes establecerlos en su lugar. Si no establece ningún mínimo y establece una altura y un ancho máximos, su imagen no se verá distorsionada (se conservará la relación de aspecto) y no será más grande que la dimensión que sea más larga y alcance su máximo.

Algunos años más tarde, buscando el mismo requisito, encontré una opción de CSS usando background-size.

Se supone que funciona en 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 demostración: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Al establecer la max-widthpropiedad CSS en 100%, una imagen llenará el ancho de su elemento primario, pero no se hará más grande que su tamaño real, preservando así la resolución.

Al establecer la heightpropiedad para automantener la relación de aspecto de la imagen, el uso de 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;      
}

Solución de trabajo simple y elegante:

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

Tuve el mismo problema. El problema para mí fue que la propiedad de altura también ya estaba definida en otra parte, la arreglé así:

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

Solución simple:

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

Por cierto, si desea centrarlo en un contenedor div principal, puede agregar esas propiedades css:

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

Realmente debería funcionar como se esperaba :)

Una de las respuestas incluye el tamaño de fondo: contener declaración css que me gusta mucho porque es una declaración directa de lo que desea hacer y el navegador simplemente lo hace.

Desafortunadamente, tarde o temprano necesitarás aplicar una sombra que desafortunadamente no funcionará bien con las soluciones de imágenes de fondo.

Entonces, digamos que tiene un contenedor que responde pero tiene límites bien definidos para el ancho y la altura mínima y máxima.

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

Y el contenedor tiene una imagen que debe tener en cuenta los píxeles de la altura del contenedor para evitar obtener una imagen muy alta que se desborde o se recorte.

El img también debe definir un ancho máximo del 100% para primero permitir que se representen anchos más pequeños y, en segundo lugar, basarse en un porcentaje, lo 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);
}

Tenga en cuenta que tiene una bonita sombra;)

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

Lo uso para un contenedor rectangular con altura y ancho fijos, pero con imágenes de diferentes tamaños.

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

Es mejor usar auto en la dimensión que debe respetar la relación de aspecto. Si no configura la otra propiedad en auto, la mayoría de los navegadores en la actualidad supondrán que desea respetar la relación de aspecto, pero no todos (IE10 en Windows Phone 8 no lo hace, por ejemplo)

width: 100%;
height: auto;

Esta es una solución muy sencilla que se me ocurrió después de seguir el enlace de conca y mirar el tamaño del fondo. Explota la imagen y luego la coloca centrada en el contenedor exterior sin escalarla.

<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); />

No para saltar a un viejo problema, pero ...

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

Aunque esto no es correcto, ya que utiliza la anulación importante en la altura, si está utilizando un CMS como WordPress que establece la altura y el ancho para usted, esto funciona bien.

Hoy en día se puede utilizar vwy vhunidades, que representan 1% del v iewport es w idth y h ocho respectivamente.

https://css-tricks.com/fun-viewport-units/

Así por ejemplo:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... hará que la imagen sea lo más ancha posible, manteniendo la relación de aspecto, pero sin ser más ancha o superior al 100% de la ventana gráfica.

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

Con CSS no es posible hacer lo que parece desear: la imagen tendrá 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, las proporciones correctas serán Preservado.

Creo que esto es lo que estabas buscando, lo estaba buscando yo mismo, pero luego lo recordé nuevamente porque encontré el código.

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

La evolución digital está en camino.