¿Cómo cambio automáticamente el tamaño de una imagen para que se ajuste a un contenedor 'div'?

¿Cómo se cambia automáticamente el tamaño de una imagen grande para que quepa en un contenedor div de menor ancho mientras se mantiene su relación ancho: alto?


Ejemplo: stackoverflow.com: cuando se inserta una imagen en el panel del editor y la imagen es demasiado grande para caber en la página, la imagen cambia de tamaño automáticamente.

preguntado el 12 de junio de 10 a las 14:06

Algunas bibliotecas interesantes para cambiar el tamaño de la imagen para que se ajuste al contenedor: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin -

Aparte de la respuesta de @ Kevin ... También puede utilizar servicios como ImageBoss para crear sus imágenes con el tamaño que desee, bajo demanda. Encajar la imagen en el contenedor es genial, pero servir imágenes de manera receptiva es muy bueno. -

@jolumg No del todo; Si bien hay mucha superposición en algunas soluciones, también hay muchas soluciones que no son intercambiables, ya que esa pregunta cómo escalar una imagen, mientras que esta pregunta cómo escalar una imagen hacia abajo. -

30 Respuestas

No aplique un ancho o alto explícito a la etiqueta de la imagen. En su lugar, dale:

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

También, trabaja para height: auto; si desea especificar un ancho solamente.

Ejemplo: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

contestado el 14 de mayo de 18 a las 23:05

Esto no escalará tanto la altura como la anchura. - Neil

altura: auto; si solo desea especificar un ancho - Rey

¿Qué pasa si la imagen es demasiado pequeña? - scott rippey

@Scott Rippey: si la imagen es más pequeña que el contenedor, no cambiará porque las reglas utilizadas son el ancho máximo y la altura máxima. - Sueños surrealistas

Con un envolvente <a> etiqueta, la imagen no cambió de tamaño. La aplicación de las reglas a la etiqueta A resolvió este problema. - SPRBRN

ajuste de objeto

Resulta que hay otra forma de hacer esto.

<img style='height: 100%; width: 100%; object-fit: contain'/>

hará el trabajo. Son cosas de CSS 3.

Violín: http://jsfiddle.net/mbHB4/7364/

Respondido el 17 de Septiembre de 20 a las 22:09

Esto escalará la imagen para que se ajuste completamente a la dimensión más grande dentro del contenedor, por lo que la dimensión más pequeña puede no cubrirla por completo. Para recortar la dimensión más grande en su lugar, use object-fit: cover - gabriel beca

Me funcionó, en comparación con la solución de @KevinD, esto NO ha cambiado las proporciones en los casos extremos. ¡Salud! - Bernabé Kecskes

Será genial cuando sea totalmente compatible. Atm, ni IE ni Edge lo admiten desafortunadamente. - espectros

Si desea establecer el ancho máximo y la altura máxima, puede hacerlo. Funciona perfectamente . - Sandip Subedi

Sin embargo, parece que no se puede usar con IE11 y edge 14/15 -> caniuse.com/#search=object-fit - corbe

Actualmente no hay forma de hacer esto correctamente de una manera determinista, con imágenes de tamaño fijo como archivos JPEG o PNG.

Para cambiar el tamaño de una imagen proporcionalmente, debe configurar ya sea la altura o el ancho a "100%", pero no ambos. Si establece ambos en "100%", su imagen se estirará.

La elección de la altura o el ancho depende de las dimensiones de la imagen y el contenedor:

  1. Si la imagen y el contenedor tienen "forma de retrato" o "forma de paisaje" (más altos que anchos o más anchos que altos, respectivamente), no importa qué altura o ancho sean "% 100". .
  2. Si su imagen es vertical y su contenedor es horizontal, debe configurar height="100%" en la imagen.
  3. Si su imagen es horizontal y su contenedor es vertical, debe configurar width="100%" en la imagen.

Si su imagen es un SVG, que es un formato de imagen vectorial de tamaño variable, puede hacer que la expansión para que se ajuste al contenedor ocurra automáticamente.

Solo debe asegurarse de que el archivo SVG no tenga ninguna de estas propiedades configuradas en el <svg> tag:

height
width
viewbox

La mayoría de los programas de dibujo vectorial establecerán estas propiedades al exportar un archivo SVG, por lo que tendrá que editar manualmente su archivo cada vez que exporte o escribir un script para hacerlo.

Respondido el 05 de diciembre de 11 a las 05:12

¿Soy solo yo o hay varios errores en esta publicación? "'en forma de retrato' o ambos 'en forma de paisaje' (más anchos que altos y más altos que anchos, respectivamente)" ... ¿no deberían cambiarse tus "respetuosos"? Y en sus viñetas 2. y 3., ambos dicen "debe establecer un ancho =" 100% "en la imagen". Supongo que copió y pegó y olvidó cambiar uno de esos a "altura" en lugar de "ancho". - mayordomo butkus

Solo lo arreglé. 2 y 3 ahora pueden ser ambos incorrectos o ambos correctos, en lugar de uno incorrecto y el otro correcto. No recuerdo cuál es la respuesta correcta. ;) - Neil

"Actualmente no hay forma de hacer esto correctamente de una manera determinista, con imágenes de tamaño fijo como archivos JPEG o PNG". Esto parece simplemente incorrecto. La respuesta de @ Thorn007 proporciona esa manera, y la he usado yo mismo: stackoverflow.com/questions/12259736/… - Dan Dascalescu

La respuesta de @DanDascalescu Thorn007 no expande la imagen si es más pequeña que el contenedor. La mejor solución hoy en día es utilizar un elemento con una imagen de fondo y configurar background-size: contain. - fronteras de kevin

Aquí hay una solución que alineará tanto vertical como horizontalmente su img dentro de un div sin ningún estiramiento, incluso si la imagen proporcionada es demasiado pequeña o demasiado grande para caber en el div.

El contenido HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

El contenido CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

La parte de jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

respondido 27 mar '19, 10:03

CSS funciona exactamente como quiero, y me salté el bit jQuery - bkwdiseño

¡Hazlo simple!

Dale al recipiente un fija height y luego para el img etiqueta dentro de ella, establecer width y max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

La diferencia es que usted establece el width ser 100%, no el max-width.

respondido 27 mar '19, 18:03

Esto hace que la proporción de la imagen cambie en Google Chrome si la imagen es muy alta y la ventana gráfica es corta. - Mikko Rantalainen

Un hermoso truco.

Tiene dos formas de hacer que la imagen responda.

  1. Cuando una imagen es una imagen de fondo.
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Ejecutarlo aquí


Pero uno debe usar img etiqueta para poner imágenes, ya que es mejor que background-image en términos de SEO como puedes escribir keyword en la alt de los img etiqueta. Entonces aquí está usted puede hacer que la imagen responda.

  1. Cuando la imagen está en img etiqueta.
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Ejecutarlo aquí

Respondido el 11 de diciembre de 17 a las 17:12

Puede configurar la imagen como fondo de un div y luego usar el Propiedad de tamaño de fondo de CSS:

background-size: cover;

Va a "Escale la imagen de fondo para que sea lo más grande posible de modo que el área de fondo esté completamente cubierta por la imagen de fondo. Es posible que algunas partes de la imagen de fondo no se vean dentro del área de posicionamiento del fondo" -- W3Schools

respondido 27 mar '19, 10:03

Creo que por "ajustar un contenedor div", el OP significaba que la imagen no debería extenderse más allá del elemento contenedor en ninguna de las dimensiones. En la solución de @JonatasWalker, la imagen está recortada. Además, es posible que una solución en segundo plano no sea semánticamente correcta, según la situación. Por ejemplo, es posible que necesite alt valores y cosas por el estilo (aunque también puede agregar una imagen ficticia que es invisible para las tecnologías que no son asistentes), o puede que necesite hacer clic en ella. - Balazs

@ Balázs ah en este caso la configuración correcta sería background-size: contain y creo que personalmente iría por la ruta de la imagen ficticia solo porque no hay una manera realmente fácil de hacer lo que se describe aquí sin JavaScript. Chuck se seca

@ChuckDries No estoy realmente seguro de a qué te refieres, la respuesta aceptada resuelve el problema. - Balazs

Mira mi solución: http://codepen.io/petethepig/pen/dvFsA

Está escrito en CSS puro, sin ningún código JavaScript. Puede manejar imágenes de cualquier tamaño y orientación.

Dado tal HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

el código CSS sería:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

respondido 27 mar '19, 10:03

Esto no admite imágenes demasiado pequeñas. - Josh C

@JoshC ¿A qué te refieres? Este funciona bien: codepen.io/pethethepig/pen/maeFo - Dmitry

404 en las imágenes que son demasiado pequeñas. - Josh C

Quería señalar que este método también funciona con contenedores de ancho variable. ¡Impresionante trabajo Dmitry! - Camilo Martín

Una ligera modificación y es perfecto: codepen.io/anon/pen/BoQmBw Gracias Dmitry. - alquin

Acabo de publicar un complemento de jQuery que hace exactamente lo que necesitas con muchas opciones:

https://github.com/GestiXi/image-scale

Uso:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

respondido 27 mar '19, 10:03

Esta solución no estira la imagen y llena todo el contenedor, pero corta parte de la imagen.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

respondido 27 mar '19, 23:03

Veo que mucha gente ha sugerido ajuste de objeto que es una buena opción. Pero si quieres que funcione también navegadores más antiguos, hay otra forma de hacerlo fácilmente.

Es muy sencillo. El enfoque que tomé fue colocar la imagen dentro del contenedor con fotometría absoluta) y entonces colócalo justo en el centro usando la combinación:

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

Una vez que está en el centro, le doy a la imagen,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Esto hace que la imagen tenga el efecto de object-fit:cover.


Aquí hay una demostración de la lógica anterior.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Esta lógica funciona en todos los navegadores.

respondido 07 mar '21, 16:03

Tengo una solución mucho mejor sin necesidad de JavaScript. Es totalmente receptivo y lo uso mucho. A menudo es necesario ajustar una imagen de cualquier relación de aspecto a un elemento contenedor con una relación de aspecto específica. Y tener todo esto totalmente receptivo es imprescindible.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Puede establecer el ancho máximo y la altura máxima de forma independiente; la imagen respetará la más pequeña (dependiendo de los valores y la relación de aspecto de la imagen). También puede configurar la imagen para que se alinee como desee (por ejemplo, para una imagen de producto sobre un fondo blanco infinito, puede colocarla en el centro de la parte inferior fácilmente).

respondido 27 mar '19, 23:03

Lo siguiente funciona perfectamente para mí:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Respondido 03 Abr '18, 14:04

Una explicación estaría en orden. Por ejemplo, ¿por qué funciona? Cual es la idea? - Pedro Mortensen

Solucioné este problema usando el siguiente código:

<div class="container"><img src="image_url" /></div>
.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

respondido 28 mar '19, 14:03

Una explicación estaría en orden. Por ejemplo, ¿cuál es la esencia o la idea? ¿Por qué funciona? - Pedro Mortensen

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

respondido 27 mar '19, 23:03

Si pudiera agregar alguna explicación de su código, sería bueno (sé que tiene algunos comentarios allí, pero solo unas pocas palabras sobre por qué / cómo esto responde a la pregunta lo haría lucir mucho mejor). - falta-el-nombre-para-mostrar

As respondido aqui, también puedes usar vh unidades en lugar de max-height: 100% si no funciona en su navegador (como Chrome):

img {
    max-height: 75vh;
}

contestado el 23 de mayo de 17 a las 12:05

Quieres decir vh? y ¿qué no funciona en Chrome? - mistermansam

@misterManSam Sí, muchas gracias, ayer estaba demasiado cansado cuando publiqué esta respuesta. max-height: xx% (unidad de porcentaje) no funciona en Chrome con algunos elementos como img, pero vh la unidad lo hace. Sin embargo, los porcentajes funcionan con height, width, max-width, etc - gaboroso

Centré y escalé proporcionalmente una imagen dentro de un hipervínculo tanto horizontal como verticalmente de esta manera:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Fue probado en Internet Explorer, Firefox y Safari.

Más información sobre el centrado es aquí.

respondido 27 mar '19, 10:03

Da la altura y el ancho que necesitas para tu imagen al div que contiene el etiqueta. No olvide dar la altura / ancho en la etiqueta de estilo adecuada.

En el etiqueta, dale la max-height y max-width como 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Puede agregar los detalles en las clases correspondientes después de hacerlo bien.

respondido 27 mar '19, 10:03

El siguiente código está adaptado de respuestas anteriores y lo probé usando una imagen llamada storm.jpg.

Este es el código HTML completo para una página simple que muestra la imagen. Esto funciona perfectamente y fue probado por mí con www.resizemybrowser.com. Coloque el código CSS en la parte superior de su código HTML, debajo de la sección principal. Coloque el código de la imagen donde desee la imagen.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

respondido 27 mar '19, 10:03

Tienes que decirle al navegador la altura de donde lo estás colocando:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

respondido 27 mar '19, 23:03

Edit: El posicionamiento de imágenes basado en tablas anterior tenía problemas en Internet Explorer 11 (max-height no funciona en display:table elementos). Lo reemplacé con posicionamiento basado en línea que no solo funciona bien tanto en Internet Explorer 7 como en Internet Explorer 11, sino que también requiere menos código.


Aquí está mi opinión sobre el tema. Solo funcionará si el contenedor tiene un tamaño específico (max-width y max-height no parece llevarse bien con los contenedores que no tienen un tamaño concreto), pero escribí el contenido CSS de una manera que permite reutilizarlo (agregar picture-frame clase y px125 clase de tamaño a su contenedor existente).

En CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Y en HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}
<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>


Editar: posible mejora adicional con JavaScript (ampliación de imágenes):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

respondido 27 mar '19, 23:03

Hay un inconveniente en utilizar este método. Si la imagen no se carga, el texto alternativo se mostrará con el contenedor principal line-height. Si el texto alternativo tiene más de una línea, comenzará a verse realmente mal ... - Jahu

La respuesta aceptada de Thorn007 no funciona cuando la imagen es demasiado pequeña.

Para resolver esto, agregué un factor de escala. De esta manera, agranda la imagen y llena el contenedor div.

Ejemplo:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Notas

  1. Para WebKit debes agregar -webkit-transform:scale(4); -webkit-transform-origin:left top; en el estilo.
  2. Con un factor de escala de 4, tienes max-width = 400/4 = 100 y max-height = 200/4 = 50
  3. Una solución alternativa es establecer el ancho máximo y la altura máxima al 25%. Es aún más sencillo.

respondido 27 mar '19, 23:03

Esta no es una solución muy confiable si está tratando de respaldar a todo el mercado. Me mantengo alejado de CSS3 a menos que tenga algún tipo de respaldo para los navegadores que no lo admiten. - amigo

A continuación, se muestra una solución simple (¡solución de 4 pasos!) Que parece funcionar para mí. El ejemplo usa el ancho para determinar el tamaño total, pero también puede voltearlo para usar la altura en su lugar.

  1. Aplicar estilo CSS al contenedor de imágenes (por ejemplo, )
  2. Establezca la propiedad de ancho en la dimensión que desee
    • Para las dimensiones, utilice % para el tamaño relativo o el ajuste de escala automático (según el contenedor de imágenes o la pantalla)
    • Utilice las px (u otro) para una dimensión estática o establecida
  3. Establezca la propiedad de altura para que se ajuste automáticamente, según el ancho
  4. ¡DISFRUTA!

Por ejemplo, los servicios administrativos de

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

respondido 27 mar '19, 23:03

Muchas gracias, lo usé en una vista web dentro de Android. Cambié el ancho al 80% para simular un margen ^^ '- naitbrahim

Una solución simple es usar Flexbox. Defina el CSS del contenedor para:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Ajuste el ancho de la imagen contenida al 100% y debería obtener una bonita imagen centrada en el contenedor con las dimensiones conservadas.

respondido 07 mar '21, 16:03

Todas las respuestas proporcionadas, incluida la aceptada, funcionan , solamente bajo el supuesto de que el div La envoltura es de un tamaño fijo. Así que así es como se hace lo que el tamaño del div wrapper es y esto es muy útil si desarrolla una página receptiva:

Escriba estas declaraciones dentro de su DIV selector:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Luego ponga estas declaraciones dentro de su IMG selector:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

MUY IMPORTANTE:

El valor de maxHeight debe ser el mismo tanto para el DIV y IMG selectores.

respondido 28 mar '19, 00:03

La declaración CSS correcta es 'altura máxima' en lugar de altura máxima en caso de camello. - Mark Townsend

Si está usando Bootstrap, solo necesita agregar el img-responsive clase a la img tag:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Imágenes de Bootstrap

respondido 28 mar '19, 00:03

La solución es fácil con un poco de matemáticas ...

Simplemente coloque la imagen en un div y luego en el archivo HTML donde especifica la imagen. Establezca los valores de ancho y alto en porcentajes utilizando los valores de píxeles de la imagen para calcular la proporción exacta de ancho y alto.

Por ejemplo, supongamos que tiene una imagen que tiene un ancho de 200 píxeles y una altura de 160 píxeles. Puede decir con seguridad que el valor de ancho será 100%, porque es el valor más grande. Para luego calcular el valor de la altura, simplemente divide la altura por el ancho, lo que da el valor porcentual del 80%. En el código se verá algo como esto ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

respondido 27 mar '19, 23:03

La forma más sencilla de hacer esto es usando object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Si está usando Bootstrap, simplemente agregue el img-responsive clase y cambio a

.container img{
    object-fit: cover;
}

respondido 28 mar '19, 00:03

Comprueba mi respuesta Haga que una imagen responda: la forma más sencilla -

img{
    width: 100%;
    max-width: 800px;
}

respondido 27 mar '19, 23:03

Como se vio en mi 2014 Ejemplo de Codepen, He creado una solución que funcionaría para cualquier combinación desconocida de ancho / alto (relación de aspecto) con la ayuda de un javascript tan pequeño como sea posible, para cambiar el CSS de cómo se centra la imagen cuando la relación de aspecto de el contenedor cambia por encima / por debajo de la relación de aspecto de la imagen:

Intente cambiar el tamaño del contenedor arrastrando la esquina inferior derecha:

// Detects when the window width is too narrow for the current image 
// aspect-ratio, and fits it to height 100% instead of width 100%.
const photo = document.images[0]

const onPhotoResize = new ResizeObserver(entries => 
  window.requestAnimationFrame(checkRatio)
)

onPhotoResize.observe(photo.parentNode)

function checkRatio(){
  const photoParent = photo.parentNode,
        imageAspectRatio = photo.clientWidth / photo.clientHeight,
        parentAspectRatio = photoParent.clientWidth / photoParent.clientHeight
        
  photo.classList[imageAspectRatio > parentAspectRatio ? 'add':'remove']('max')
}
.box{
  width: 20%;
  height: 60%;
  margin: auto;
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  resize: both;
  overflow: hidden;
  border: 5px solid red;
 } 

.box > img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%); 
}

.box > img.max{ width:auto; height:100%; }
<div class='box'>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg">
</div>

Respondido 09 Abr '21, 22:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.