0

Estoy creando una tienda digital donde los usuarios podrán tanto comprar como vender artículos, pero me encuentro con el siguiente problema: los usuarios al cargar imágenes de los productos que desean vender esas pueden ser de cualquier proporción haciendo que cada contener donde se muestran los artículos tenga un tamaño diferente pero yo deseo crear un aspecto similar al de amazon, mercadolibre o tiendas por el estilo como podría hacer para que todas las imágenes tengan las mismas proporciones. estoy trabajando con php en el backend y bootstrap como framework css

1
  • Bienvenido, serías tan amable de compartir el código necesario para reproducir tu escenario y poderte ayudar mejor?
    – user128299
    el 20 dic. 2019 a las 2:49

1 respuesta 1

3

Simplemente debes darle un tamaño fijo al padre y colocar el tamaño a la imagen del 100%, además puedes agregar object-fit para que no pierda la relación de ancho-largo

.img-dim-fit .item{
  width: 200px;
  height: 200px;
  list-style: none;
}
.img-dim-fit .item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
  
.img-dim .item{
  width: 200px;
  height: 200px;
  list-style: none;
}
.img-dim .item img{
  width: 100%;
  height: 100%;
 }
<h1>Imágenes dimensionadas y con object-fit</h1>

<ul class="img-dim-fit">
  <li class="item">
    <img src="https://avatars.mds.yandex.net/get-pdb/1979207/201755e7-07f0-4397-9674-0a1b52fec345/s1200">
  </li>
  <li class="item">
    <img src="https://im0-tub-ru.yandex.net/i?id=ec2b08a213ea97352a2a7f8d75006a3d-l&n=13">
  </li>
</ul>

<h1>Imágenes dimensionadas y sin object-fit</h1>

<ul class="img-dim">
  <li class="item">
    <img src="https://avatars.mds.yandex.net/get-pdb/1979207/201755e7-07f0-4397-9674-0a1b52fec345/s1200">
  </li>
  <li class="item">
    <img src="https://im0-tub-ru.yandex.net/i?id=ec2b08a213ea97352a2a7f8d75006a3d-l&n=13">
  </li>
</ul>

<h1>Imágenes originales</h1>

<ul style="list-style: none">
  <li>
    <img src="https://avatars.mds.yandex.net/get-pdb/1979207/201755e7-07f0-4397-9674-0a1b52fec345/s1200">
  </li>
  <li>
    <img src="https://im0-tub-ru.yandex.net/i?id=ec2b08a213ea97352a2a7f8d75006a3d-l&n=13">
  </li>
</ul>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.