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


1513

¿Cómo se redimensiona automáticamente una imagen grande para que quepa en un contenedor div de menor ancho manteniendo 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.


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

Aparte de la respuesta de @ Kevin ... También puede usar servicios como ImageBoss para crear sus imágenes con el tamaño que desee, a pedido. Encajar la imagen en el contenedor es genial, pero servir imágenes de manera receptiva es muy difícil.
Igor Escobar


@jolumg No del todo; Si bien hay una gran superposición en algunas soluciones, también hay muchas soluciones que no son intercambiables, ya que esta pregunta cómo escalar una imagen hacia arriba, mientras que esta está pidiendo escalar una imagen hacia abajo.
TylerH

1
001 - Esta es una respuesta a su pregunta que se cerró antes de que la viera. Cómo llamar a un componente secundario desde un componente primario. Escribí una publicación de blog explicando cómo hacer que los componentes se comuniquen usando interfaces: datajugglerblazor.blogspot.com/2020/01/…
Data Juggler

Respuestas:


1878

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

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

Además, height: auto;si desea especificar solo un ancho.

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>


40
Esto no escalará tanto la altura como el ancho.
Neil

75
altura: auto; si desea especificar solo un ancho
Roi

82
¿Qué pasa si la imagen es demasiado pequeña?
Scott Rippey

18
@Scott Rippey: si la imagen es más pequeña que el contenedor, no cambiará porque las reglas utilizadas son max-width y max-height.
Surreal Dreams

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

433

ajuste de objeto

Resulta que hay otra forma de hacer esto.

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

Hará el trabajo. Es CSS 3 cosas.

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


39
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, useobject-fit: cover
Gabriel Grant

44
Funcionó para mí, en comparación con la solución de @KevinD, esto NO ha cambiado las proporciones en los casos extremos. ¡Salud!
Barnabas Kecskes

99
Será genial cuando sea totalmente compatible. Cajero automático, ni IE ni Edge lo soportan desafortunadamente.
espectras

2
Si desea establecer max-width y max-height, puede hacerlo. Funciona perfectamente .
Sandip Subedi

3
Parece que no se puede usar con IE11 y edge 14/15
mcorbe

106

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, usted tiene que fijar bien la altura o anchura 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 la imagen y las dimensiones del 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, respectivamente), entonces no importa cuál altura o ancho sean "% 100" .
  2. Si su imagen es vertical y su contenedor es horizontal, debe configurarla height="100%"en la imagen.
  3. Si su imagen es horizontal y su contenedor es vertical, debe establecerla 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 se ajuste automáticamente al contenedor.

Solo tiene que asegurarse de que el archivo SVG no tenga ninguna de estas propiedades establecidas en la <svg>etiqueta:

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.


2
¿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 sus "respetuosos"? Y en las viñetas 2. y 3., ambas dicen "debes establecer width =" 100% "en la imagen". Supongo que usted copió y olvidó cambiar uno de esos a "alto" en lugar de "ancho".
Buttle Butkus

Solo lo arreglé. 2 y 3 ahora pueden estar equivocados o ambos correctos, en lugar de que uno esté equivocado y el otro esté correcto. No recuerdo cuál es la respuesta correcta. ;)
Neil

2
"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. @ Respuesta de Thorn007 proporciona una manera tal, y lo he utilizado 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 usar un elemento con una imagen de fondo y un conjunto background-size: contain.
Kevin Borders

"Para cambiar el tamaño de una imagen proporcionalmente, debe establecer el alto o el ancho en" 100% ", pero no en ambos". <Esto fue exactamente lo que me ayudó. Gracias
Alexander Santos

77

Aquí hay una solución que alineará vertical y horizontalmente su img dentro de un div sin ningún estiramiento, incluso si la imagen suministrada 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);
    }

1
CSS funciona exactamente como quiero, y me salté el bit jQuery
bkwdesign

48

¡Hazlo simple!

Dale al contenedor un fijo height y luego, por la imgetiqueta dentro de él, establece widthy max-height.

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

La diferencia es que establece el width100%, no el max-width.


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

29

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>

Ejecútalo aquí


Pero uno debe usar la imgetiqueta para poner imágenes, ya que es mejor que background-imageen términos de SEO, ya que puede escribir palabras clave en altla imgetiqueta. Así que aquí puede hacer que la imagen responda.

  1. Cuando la imagen está en la imgetiqueta.
#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>

Ejecútalo aquí


23

Puede establecer la imagen como fondo en un div y luego usar la propiedad de tamaño de fondo CSS :

background-size: cover;

Será "Escala la imagen de fondo a ser tan grande como sea posible para que el área de fondo se cubre totalmente la imagen de fondo de algunas partes de la imagen de fondo pueden no estar a la vista dentro de la zona de fondo de posicionamiento." - W3Schools


Creo que al "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 se recorta. Además, una solución de fondo puede no ser semánticamente correcta, según la situación. Por ejemplo, es posible que necesite altvalores y cosas similares (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.
Balázs

@ Balázs ah, en este caso, la configuración correcta sería background-size: containy creo que personalmente seguiría la ruta de la imagen ficticia solo porque no hay una manera fácil de hacer lo que se describe aquí sin JavaScript
Chuck Dries es el

@ChuckDries No estoy realmente seguro de lo que quieres decir, la respuesta aceptada resuelve el problema.
Balázs

22

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

2
Esto no maneja imágenes que son demasiado pequeñas.
Josh C

1
@JoshC ¿Qué quieres decir? Este funciona bien: codepen.io/petethepig/pen/maeFo
dmitry

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

Una ligera modificación y es perfecta: codepen.io/anon/pen/BoQmBw Gracias Dmitry.
Alqin

10

Acabo de publicar un complemento jQuery que hace exactamente lo que necesita 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();
});

10

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

9

Veo que muchas personas han sugerido el ajuste de objetos, que es una buena opción. Pero si también quiere que funcione en navegadores antiguos , hay otra forma de hacerlo fácilmente.

Es bastante simple. El enfoque que tomé fue colocar la imagen dentro del contenedor con absoluta y luego colocarla 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.


8

Lo siguiente funciona perfectamente para mí:

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

7

Tengo una solución mucho mejor sin necesidad de JavaScript. Es totalmente sensible y lo uso mucho. A menudo necesita ajustar una imagen de cualquier relación de aspecto a un elemento contenedor con una relación de aspecto especificada. Y tener todo esto completamente 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 max-width y max height independientemente; la imagen respetará la más pequeña (según 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 del producto sobre un fondo blanco infinito, puede colocarla en el centro de la parte inferior fácilmente).


5

Dé el alto y el ancho que necesita para su imagen al div que contiene la etiqueta <img>. No olvide dar la altura / anchura en la etiqueta de estilo adecuada.

En la etiqueta <img>, ingrese max-heighty max-widthcomo 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 apropiadas después de hacerlo correctamente.


5

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 perfecto y lo probé con www.resizemybrowser.com. Coloque el código CSS en la parte superior de su código HTML, debajo de la sección de la cabeza. Ponga 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>

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

2
Si pudiera agregar alguna explicación de su código, eso 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 ver mucho mejor).
display-name-is-missing

5

Tienes que decirle al navegador la altura de dónde lo estás colocando:

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

5

Editar: el posicionamiento de imágenes basado en tablas anterior tenía problemas en Internet Explorer 11 ( max-heightno funciona en display:tableelementos). Lo he reemplazado con un 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-widthy max-heightno parece llevarse bien con los contenedores que no tienen un tamaño concreto), pero escribí el contenido CSS de una manera que permite su reutilización (agregar picture-frameclase y px125clase 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>

MANIFESTACIÓN


Editar: Posible mejora adicional usando JavaScript (imágenes de aumento de escala):

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

Hay un inconveniente en usar 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, que comenzará a buscar muy mal ...
jahu

5

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

4

Como se respondió aquí , también puede usar vhunidades en lugar de max-height: 100%si no funciona en su navegador (como Chrome):

img {
    max-height: 75vh;
}

1
Qué quiere decirvh ? y que no funciona en Chrome
misterManSam

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

4

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 está aquí .


4

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, aumenta 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 debe agregar -webkit-transform:scale(4); -webkit-transform-origin:left top;el estilo.
  2. Con un factor de escala de 4, tiene 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 simple.

1
Esta no es una solución muy confiable si está tratando de apoyar 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.
dudewad

4

Si está utilizando Bootstrap, solo necesita agregar la img-responsiveclase a la imgetiqueta:

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

Imágenes de Bootstrap


3

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

  1. Aplique estilo CSS al contenedor de imágenes (por ejemplo, <img>)
  2. Establezca la propiedad de ancho a la dimensión que desee
    • Para dimensiones, use %para tamaño relativo o autoescalado (según el contenedor o la pantalla de la imagen)
    • Usar px(u otro) para una dimensión estática o establecida
  3. Establezca la propiedad de altura para ajustar automáticamente, según el ancho
  4. ¡DISFRUTAR!

Por ejemplo,

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

3

Todas las respuestas proporcionadas, incluida la aceptada, funcionan solo bajo el supuesto de que el divcontenedor es de un tamaño fijo. Así es como se hace, sea cual sea el tamaño del divcontenedor, y esto es muy útil si desarrolla una página receptiva:

Escriba estas declaraciones dentro de su DIVselector:

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

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

MUY IMPORTANTE:

El valor de maxHeightdebe ser el mismo para los selectores DIVy IMG.


1
La declaración correcta de CSS es 'max-height' en lugar de maxHeight en el caso de camello.
Mark Townsend

3

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 buena imagen centrada en el contenedor con las dimensiones preservadas.


1

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

Simplemente coloque la imagen en un div y luego en el archivo HTML donde especifique la imagen. Establezca los valores de ancho y alto en porcentajes utilizando los valores de píxeles de la imagen para calcular la relación exacta de ancho a 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 del ancho será del 100%, porque es el valor más grande. Para calcular el valor de la altura, simplemente divida la altura por el ancho, lo que da el valor porcentual del 80%. En el código se verá más o menos así ...

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

1

La forma más sencilla de hacer esto es mediante el uso de 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á utilizando Bootstrap, simplemente agregue la img-responsiveclase y cambie a

.container img{
    object-fit: cover;
}


-1

O simplemente puede usar:

background-position:center;
background-size:cover;

Ahora la imagen ocupará todo el espacio del div.


1
no se trata de alineación, se trata de cambiar su tamaño.
Baljeetsingh
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.