¿Cómo puedo hacer que todas las imágenes de diferente altura y ancho sean iguales a través de CSS?


88

Estoy intentando crear una pared de imágenes que consta de fotos de productos. Desafortunadamente, todos tienen diferente altura y ancho. ¿Cómo puedo usar CSS para que todas las imágenes se vean del mismo tamaño? preferiblemente 100 x 100.

Estaba pensando en hacer un div que tenga una altura y un ancho de 100px y luego, de alguna manera, llenarlo. No estoy seguro de cómo hacer eso.

¿Cómo puedo lograr esto?


1
haga que los divs sean de altura / ancho fijos, luego rellene las imágenes con un overflow:none, y centre la imagen horizontal / verticalmente dentro del div.
Marc B

2
@MarcB Supongo que te refieres overflow: hidden;. :)
insertusernamehere

1
@MarcB no existe tal overflow:noneen css. Incluso overflow:hiddenno resolverá el problema.
Rajesh Paul

Respuestas:


171

Respuesta actualizada (sin soporte IE11)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

Respuesta original

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>


2
respuesta impresionante! ¡También funciona para bibliotecas como Angular y Vue cuando se desea utilizar un repetidor!
Matt Catellier

1
El uso de div en lugar de img podría tener impacto en SEO (no estoy seguro)
Muhammad Ali Mansoor

@MuhammadAliMansoor podría si no compensa con microtadatas. Actualicé mi respuesta para lograr el mismo resultado con las etiquetas img y el ajuste de objeto, que ahora tiene un buen soporte.
Simon Arnold

1
¿Por qué diablos no está todo esto en Internet? ¡Incluso funciona con% anchos!
Liz

33

¿Puedo agregar eso si distorsionas demasiado tus imágenes, es decir, las sacas de una proporción, es posible que no se vean bien, una pequeña cantidad está bien, pero una forma de hacerlo es poner las imágenes dentro de un 'contenedor' y configure el contenedor en 100 x 100, luego configure su imagen para que no se desborde, y configure el ancho más pequeño al ancho máximo del contenedor, esto recortará un poco de su imagen,

por ejemplo

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

De esta manera, la imagen mantendrá el tamaño de su contenedor, pero cambiará de tamaño sin romper las restricciones.


Este es mi método preferido. Es más práctico que usar fondos.
gillytech

1
Esta es definitivamente la mejor opción, mis imágenes no se distorsionaron al.l
pwborodich

31

Forma más simple: esto mantendrá el tamaño de la imagen como está y llenará la otra área con espacio, de esta manera todas las imágenes ocuparán el mismo espacio especificado independientemente del tamaño de la imagen sin estirarse

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

1
Vaya, fue realmente así de simple. Quizás las otras respuestas sean "correctas", pero esta fue la más fácil de implementar.
Randall Arms Jr.

5
La única advertencia a esto es que no hay soporte para IE11.
Romuloux

La ventaja de esto es que sus imágenes no están recortadas ni sesgadas, pero la desventaja es que todavía no todas tienen necesariamente el mismo tamaño. En lugar de object-fit: scale-down, también puede probar object-fit: cover.
Vincent

19

Puede usar la object-fitpropiedad para dimensionar los imgelementos:

  • coverestira o encoge la imagen proporcionalmente para llenar el contenedor. La imagen se recorta horizontalmente o verticalmente si es necesario.
  • contain estira o encoge la imagen proporcionalmente para que quepa dentro del contenedor.
  • scale-down encoge la imagen proporcionalmente para que quepa dentro del contenedor.

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}
<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

En el ejemplo anterior: rojo es paisaje, verde es retrato y azul es imagen cuadrada. El patrón a cuadros consta de cuadrados de 16x16px.


1
Esto es genial, excepto que no funciona para ninguna versión de IE. caniuse.com/#feat=object-fit
Jameela Huq

3

Para aquellos que usan Bootstrap y no quieren perder la capacidad de respuesta, simplemente no establezcan el ancho del contenedor. El siguiente código se basa en la publicación de gillytech .

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

O style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}

3

Puedes hacerlo de esta manera:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

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

1

Estaba buscando una solución para este mismo problema, crear una lista de logotipos.

Se me ocurrió esta solución que usa un poco de flexbox, que funciona para nosotros ya que no nos preocupan los navegadores antiguos.

Este ejemplo asume una caja de 100x100px pero estoy bastante seguro de que el tamaño podría ser flexible / sensible.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

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

ps .: es posible que deba agregar algunos prefijos o usar autoprefixer.


1

Según la respuesta de Andi Wilkinson (la segunda), mejoré un poco, asegúrese de que se muestre el centro de la imagen (como lo hizo la respuesta aceptada):

HTML:

<div class="crop">
   <img src="img.png">
</div>

CSS:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}

1

Establecer parámetros de altura y ancho en el archivo CSS

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}


1
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Hará que el tamaño de las imágenes sea el mismo que el div y puede usar la cuadrícula de arranque para manipular el tamaño del div en consecuencia


0

El tamaño de la imagen no depende de la altura y el ancho del div,

usar el elemento img en css

Aquí hay un código CSS que te ayuda

div img{
         width: 100px;
         height:100px;
 }

si quieres establecer el tamaño por div

utilizar esta

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

con este código, su imagen se muestra en tamaño original, pero muestra el primer desbordamiento de 100x100px que se ocultará


0

Sin código, es difícil ayudarte, pero aquí tienes algunos consejos prácticos:

Sospecho que su "muro de imágenes" tiene algún tipo de contenedor con una identificación o clase para darle estilos.

p.ej:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Diseñar un tamaño en todas las imágenes para su muro de imágenes, sin afectar a otras imágenes, como su logotipo, etc., es fácil si su código está configurado de manera similar a la anterior.

#imagewall img {
  width: 100px;
  height: 100px; }

Pero si sus imágenes no son perfectamente cuadradas, se sesgarán con este método.


0

Vaya a su archivo CSS y cambie el tamaño de todas sus imágenes de la siguiente manera

img {
  width:  100px;
  height: 100px;
}

simple y directo!
KiwenLau
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.