mostrar - imagenes de html

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

Question

Estoy tratando de crear una pared de imágenes que consiste en fotos de productos. Desafortunadamente, todos ellos son de diferente altura y ancho. ¿Cómo puedo usar css para hacer 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 100 px y luego cómo llenarlo. No estoy seguro de cómo hacer eso.

¿Cómo puedo lograr esto?

Answer 1

¿Puedo simplemente agregar que si distorsionas demasiado tus imágenes, es decir, las quitas de una relació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 desborde ninguna, y establezca el ancho más pequeño en el ancho máximo del contenedor, sin embargo, 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 forma, la imagen se mantendrá del tamaño de su contenedor, pero se redimensionará sin romper las restricciones

Answer 2

Basado en la respuesta de Andi Wilkinson (el segundo), mejoré un poco, me aseguro 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+ */
}

Answer 3

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

usar el elemento img en css

Aquí está el 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 se ocultará

Answer 4

Estaba buscando una solución para este mismo problema, para 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 puede 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 .: puede necesitar agregar algunos prefijos o usar autoprefixer.

Answer 5

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

.ImageStyle{

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

Answer 6

La forma más simple: mantendrá el tamaño de la imagen tal como está y llenará la otra área con espacio, de esta forma todas las imágenes tomarán el mismo espacio especificado independientemente del tamaño de la imagen sin estirarla

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

}

Answer 7

Para aquellos que usan Bootstrap y no desean perder la capacidad de respuesta simplemente no establezca 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;
}

Answer 8

Puede usar la propiedad object-fit para object-fit tamaño de los elementos img :

• cover estira o contrae la imagen proporcionalmente para llenar el contenedor. La imagen se recorta horizontalmente o verticalmente si es necesario.
• contain estiramientos o encoge la imagen proporcionalmente para caber dentro del contenedor.
• scale-down reduce la imagen proporcionalmente para caber 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: el rojo es el paisaje, el verde es el retrato y el azul es la imagen cuadrada. El patrón a cuadros consiste en cuadrados de 16x16px.

Answer 9

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

Answer 10

Sin código, es difícil ayudarlo, pero le ofrecemos algunos consejos prácticos:

Sospecho que tu "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 pared de imagen, sin afectar 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, estarán sesgadas utilizando este método.

Answer 11

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

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

Answer 12

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    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>

Answer 13

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    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>