Foros del Web » Creando para Internet » CSS »

Poner imagenes cuadradas en vez de rectangulas?

Estas en el tema de Poner imagenes cuadradas en vez de rectangulas? en el foro de CSS en Foros del Web. Hola estoy intentando que la imagen de los post de este sitio: https://freebify-templateify.blogspot.com/ sean cuadradas responsivas, en vez de rectangulares, osea que siempre se mantenga ...
  #1 (permalink)  
Antiguo 20/05/2022, 05:36
 
Fecha de Ingreso: agosto-2014
Mensajes: 293
Antigüedad: 8 años
Puntos: 4
Pregunta Poner imagenes cuadradas en vez de rectangulas?



Hola estoy intentando que la imagen de los post de este sitio: https://freebify-templateify.blogspot.com/

sean cuadradas responsivas, en vez de rectangulares, osea que siempre se mantenga el tamaño cuadrado de la imagen..


He cambiado el alto de las imagenes:

.index-post .entry-image-wrap {
position: relative;
float: left;
width: 100%;
height: 150px;
overflow: hidden;
margin: 0 0 12px;
border-radius: 6px;
}

El problema que como el with siempre es 100%, se va adaptando sin respetar la forma cuadrada de la imagen...

Alguna idea de como se puede hacer que mantenga siempre el cuadrado ?

Gracias!
  #2 (permalink)  
Antiguo 23/06/2022, 20:07
 
Fecha de Ingreso: octubre-2006
Mensajes: 227
Antigüedad: 15 años, 9 meses
Puntos: 3
Respuesta: Poner imagenes cuadradas en vez de rectangulas?

Podria ser algo asi

Código HTML:
<div class="cuadrado">
  <img class="content"src="https://i.imgur.com/9Q9pgmR.jpeg">
</div> 
Código HTML:
.cuadrado {
  position: relative;
  width: 50%;
}

.cuadrado:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 5px;
}
__________________
[email protected]
  #3 (permalink)  
Antiguo 27/06/2022, 06:25
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.143
Antigüedad: 18 años, 2 meses
Puntos: 832
Respuesta: Poner imagenes cuadradas en vez de rectangulas?

También podrías utilizar object-fit: https://developer.mozilla.org/es/doc...CSS/object-fit



La zona horaria es GMT -6. Ahora son las 05:55.