3

img{
  width: 50%;
  height: 50%;
}
img[name="imagen_cuadrada"]{
  width: 50px;
  height: 50px;
}
<img src="https://www.tuexperto.com/wp-content/uploads/2018/03/paisajes.jpg">

<img name="imagen_cuadrada" src="https://www.tuexperto.com/wp-content/uploads/2018/03/paisajes.jpg">

tengo un problema con redimensionar una imagen, resulta que tengo varias fotos tomadas con el celular pero algunas en horizontal y otras en vertical, debido a eso hay fotos con mas ANCHO que algunas y fotos con mas ALTO que algunas, quiero saber como hacer TODAS las imagenes cuadradas sin necesidad de usar pixeles, solo indicando con porcentaje en lo posible, nose si me explico. Gracias de antemano.

3
  • Incluye el código con el que has tratado de hacerlo para poder ayudarte :) Commented el 13 dic. 2018 a las 14:16
  • Ya añadí el codigo, no es exactamente la misma situacion pero el problema seria el mismo y con varias imagenes Commented el 13 dic. 2018 a las 14:30
  • 1
    Te recomiendo utilizar BOOTSRAP para trabajar en modo responsive. Te dejo este link para trabajar imágenes responsivas Imagenes responsivas con BOOTSTRAP Commented el 14 dic. 2018 a las 0:17

3 respuestas 3

11

Una forma de recortar en un cuadrado todas las imágenes rectangulares con puro CSS es la siguiente:

img {
  object-fit: cover;
  width:17vw;
  height: 17vw;
  padding: 1vw;
}
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">

4
  • GRACIASSSSS me funciono, por curiosidad, que unidad de medida representaria " vw " y que funcion cumple "object-fit" Commented el 13 dic. 2018 a las 14:41
  • 3
    vw es una unidad de medida CSS que quiere decir "Viewport Width" y es similar a porcentaje, 1vw es igual al 1% del ancho del display del usuario. La propiedad objetc-fit indica al navegador de qué manera una imagen debe ajustarse a su contenedor. Con la propiedad "cover" la imagen se redimensiona manteniendo su relación de aspecto mientras llena todo el espacio del elemento que la contiene. La imágen será recortada para caber dentro de su contenedor sin distorsionarse.
    – Pedro
    Commented el 13 dic. 2018 a las 14:47
  • Ahora entiendo, muchas gracias pedro Commented el 13 dic. 2018 a las 14:49
  • 1
    @Diego si esta repuesta te sirvió, márcala como aceptada
    – Alvaro Montoro
    Commented el 13 dic. 2018 a las 15:01
4

Para esto es mejor que no uses directamente una imagen porque, al ponerle un tamaño específico, lo que el navegador va a hacer es distorsionar la imagen para que se ajuste al tamaño especificado.

Sería mejor poner la imagen dentro de un contenedor (un <div> valdría) que tenga el tamaño que quieres y que oculte las partes que sobresalgan (overflow). De ese modo todas las imágenes se verán con el mismo tamaño y no estarán distorsionadas (aunque se perderá una parte en los extremos verticales u horizontales dependiendo de si la imagen es en modo retrato o apaisada).

Algo como esto:

div.contenedor-imagen {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

div.contenedor-imagen img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="contenedor-imagen">
  <img src="https://www.tuexperto.com/wp-content/uploads/2018/03/paisajes.jpg">
</div>
<div class="contenedor-imagen">
  <img src="https://placehold.it/200x400">
</div>
<div class="contenedor-imagen">
  <img src="https://placehold.it/300x200">
</div>
<div class="contenedor-imagen">
  <img src="https://placehold.it/300x300">
</div>


Otra opción sería usar imágenes de fondo (background-image) en lugar de poner las imágenes como etiqueta dentro del div.

De ese modo podrías especificar un background-size: cover para indicarle al navegador que la imagen de fondo debe expandirse/reducirse hasta ajustarse al tamaño del contenedor de la manera más apropiada.

Esta alternativa se vería así:

div {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
  background-size: cover;
  background-position: center center;
}
<div style="background-image: url(https://www.tuexperto.com/wp-content/uploads/2018/03/paisajes.jpg)"></div>
<div style="background-image: url(https://placehold.it/200x400)"></div>
<div style="background-image: url(https://placehold.it/300x200)"></div>
<div style="background-image: url(https://placehold.it/300x300)"></div>

Esta solución también podría mejorarse de otros modos: evitando los estilos en línea o usando data-atributos y los pseudo-elementos ::before o ::after.

4
  • Comprendo, muchas graciass Commented el 13 dic. 2018 a las 14:44
  • @Pedro gracias por el comentario. El chorizo de código es apenas una regla css más de la solución que propusiste. Y es una alternativa válida a tu solución con object-fit, que es muy buena (yo le di el primer +1) pero que no es soportada por todos los navegadores.
    – Alvaro Montoro
    Commented el 13 dic. 2018 a las 14:56
  • Tienes razón, quizás debería haberme centrado más en la respuesta con la imagen de fondo que en la del contenedor con la imagen dentro, en lugar de ponerla como una nota al final. Editare la respuesta para añadir un ejemplo y una mejor explicación.
    – Alvaro Montoro
    Commented el 13 dic. 2018 a las 14:58
  • @Pedro Tu solución tampoco es buena ya que no usas porcentaje para nada como se especifica en la pregunta y no es muy compatible que digamos.
    – devconcept
    Commented el 13 dic. 2018 a las 16:41
2

Para eso necesitas un cuadrado responsive. No necesitas ninguna otra unidad de medida que porcientos. Para eso debes hacer un contenedor de elementos posicionados y luego usando padding especificar el alto de tu contenedor. Esto es posible porque cuando se especifica en porciento se calcula así:

Con respecto a la anchura("width") del bloque que lo contiene.

Así que si especificas el ancho en porcientos puedes también especificar el alto en porcientos. Si usas el mismo número para ambos será un cuadrado en cualquier resolución.

Esta técnica es la más compatible con todos los navegadores y además se integra mejor con los otros sistemas de rejillas de frameworks CSS como bootstrap que son basados en porcientos.

Usar vm es una mala idea porque esta unidad se refiere a porciento del viewport, no a porciento del elemento contenedor como debería ser. Imagina que pones un sidebar y ya tu código no funciona porque el sidebar está ocupando parte de ese porciento.

Primero crea tu container cuadrado

.responsive-container {
    position: relative; // Para contener los hijos absolutos
    width: 50%; // La dimensión que quieras
    height: 0; // Eliminas el alto para especificarlo con padding
    padding: 50% 0 0; // top igual que el width y los demás en 0
}

Luego haces un container o una clase para la imagen que sea absoluto y que cubra todo su elemento padre.

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

El responsive-container no tiene alto pero el padding le crea un espacio que es ocupado completamente por el image container. Aquí tienes varias opciones para mostrar las imagenes como usar background-image o que tu image container sea la imagen como tal. Aquí te dejo algunas variantes que se me ocurren.

.responsive-container {
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding: 50% 0 0;
}

.image-bg1,
.image-bg2 {
  background-image: url(https://picsum.photos/400/300);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image-bg2 {
  background-image: url(https://picsum.photos/600/300);
}
<div class="responsive-container">
  <div class="image-bg1"></div>
</div>
<div class="responsive-container">
  <div class="image-bg2"></div>
</div>

También puedes usar elementos img

.responsive-container {
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding: 50% 0 0;
}

.image-bg {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="responsive-container">
  <img class="image-bg" src="https://picsum.photos/400/300">
</div>
<div class="responsive-container">
  <img class="image-bg" src="https://picsum.photos/600/300">
</div>

Es sólo para que veas que tienes muchas posibilidades siempre y cuando uses padding para generar tu layout.

En este último ejemplo estoy usando la mitad de la pantalla y aún funciona

.screen-half {
  width: 50%;
  margin: 0 auto;
}

.responsive-container {
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding: 50% 0 0;
}

.image-bg1,
.image-bg2 {
  background-image: url(https://picsum.photos/400/300);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image-bg2 {
  background-image: url(https://picsum.photos/600/300);
}
<div class="screen-half">
  <div class="responsive-container">
    <div class="image-bg1"></div>
  </div>
  <div class="responsive-container">
    <div class="image-bg2"></div>
  </div>
</div>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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