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

img tag as background cover

Question

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

¿Algunas ideas?

Answer 1

Al establecer la propiedad de max-width CSS al 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.

Establecer la propiedad de height en auto mantiene la relación de aspecto de la imagen, usar 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 2

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

Answer 3

Creo que esto es lo que buscas, 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;

la evolución digital está en camino.

Answer 4

Eso no es posible sin JS, así que escribí un 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%);
  }
}

Aún tiene que seguir con el ancho o la altura del bloque primario. 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 5

Esta es una solución muy sencilla que surgió después de seguir el enlace de la conca y observar el tamaño del 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 6

Lo mejor es usar auto en la dimensión que debe respetar la relación de aspecto. Si no establece la otra propiedad en automático, la mayoría de los navegadores actuales suponen que desea respetar la relación de aspecto, pero no todos (IE10 en Windows Phone 8 no, por ejemplo)

width: 100%;
height: auto;

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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?

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

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

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

--- EDITAR BASADO EN LA RETROALIMENTACIÓN ---

¿Está familiarizado con las propiedades de max-width max-height ? Siempre puedes establecerlos en su lugar. Si no establece ningún mínimo y establece un alto y ancho máximo, su imagen no se distorsionará (se mantendrá 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.

Answer 10

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%);
}

Answer 11

Solución simple:

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

Por cierto, si quieres centrarlo en un contenedor div principal, puedes agregar esas propiedades css:

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

Realmente debería funcionar como se esperaba :)

Answer 12

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

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

Answer 13

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

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

Entonces, digamos que usted tiene un contenedor que es receptivo 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 un img 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 recorta.

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

Tenga en cuenta que tiene una buena sombra;)

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

Answer 14

Utilice 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).

Con CSS no es posible hacer lo que parece desear: la imagen debe tener un ancho del 100%, pero si este ancho da como resultado una altura que es demasiado grande, se aplicará una altura máxima, y ​​por supuesto las proporciones correctas serán Preservado.

Answer 15

prueba esto

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