Ancho de columna flexible basado en el ancho de la imagen en su interior (con altura fija)
He creado un contenedor de 10 columnas utilizando Elementor.
¿Cómo puedo establecer el ancho de las columnas en función del ancho de las imágenes dentro del ancho de columna con alturas fijas de imagen? Como el ejemplo a continuación:
Mi configuración de Elementor es similar a este diseño:
<div class="container">
<div class="column">
<img src="#" alt="">
<h2>Título del libro</h2>
<h5>Autor</h5>
<p>Precio</p>
<button>Comprar ahora</button>
</div>
</div>
davy.ai
Para establecer el ancho de las columnas basado en el ancho de las imágenes, se puede utilizar CSS para establecer el ancho de la columna basado en el ancho de la imagen. Esto se puede lograr estableciendo el ancho de la imagen al 100% y luego estableciendo el ancho de la columna al ancho de la imagen, utilizando la función calc() de CSS.
Aquí hay un ejemplo de cómo se puede modificar su configuración de Elementor:
En el ejemplo anterior, el ancho de la columna se establece en calc((100% – 20px)/10), lo que significa que cada columna ocupará 1/10 del ancho disponible, menos 20px de espacio entre las columnas. El ancho de la imagen dentro de cada columna se establece al 100%, lo que significa que ocupará todo el ancho de la columna.
Al establecer el ancho de la columna dinámicamente basado en el ancho de la imagen, se puede lograr un diseño donde las columnas tienen diferentes anchos, pero el contenido dentro de cada columna está alineado.