es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Establecer la altura de un div a partir de su anchura (y viceversa)

26 Jul, 2023 Programación

Estoy trabajando en un proyecto que implica crear diferentes etiquetas, estas etiquetas tienen diferentes formatos predefinidos.

A veces, el ancho de la etiqueta es superior a su altura y viceversa.

Cuando el ancho es superior, me gustaría hacer que el ancho del div sea el 90% del div padre y ajustar la altura en consecuencia (manteniendo la misma proporción). Viceversa si la altura es superior.

La cuestión es que, dado que establezco mi ancho/altura en porcentaje del div padre, no sé cómo mantener la proporción.

Genero mi página a través de twig (tengo acceso tanto a la altura como al ancho en milímetros).

Esto es lo que estoy haciendo actualmente.

{% if template.format.width >= template.format.height %}
{% set templateWidth = 90 %}
{% set templateHeight = (90/template.format.width)template.format.height %}
{% else %}
{% set templateWidth = (90/template.format.height)template.format.width %}
{% set templateHeight = 90 %}
{% endif %}

Mi div se establece así:

style=”position:relative; width: {{ templateWidth }}%; height: {{ templateHeight }}%”

Sé que esto no puede funcionar ya que el div padre no tiene la misma altura y ancho.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para mantener la proporción de etiquetas en HTML/CSS utilizando Twig

    Para mantener la proporción de las etiquetas en HTML/CSS utilizando Twig, puedes utilizar el siguiente enfoque:

    1. Determina la relación de aspecto de la etiqueta (ancho/alto).
    2. Establece el ancho de la etiqueta al 90% del div padre.
    3. Calcula la altura de la etiqueta en función de la relación de aspecto y el ancho de la etiqueta.
    4. Aplica el ancho y la altura como estilos en línea al div de la etiqueta.

    Aquí tienes un ejemplo de cómo puedes implementar esta solución con el código proporcionado:

    {% if template.format.width >= template.format.height %}
  {% set aspectRatio = template.format.width / template.format.height %}
  {% set labelWidth = 90 %}
  {% set labelHeight = labelWidth / aspectRatio %}
{% else %}
  {% set aspectRatio = template.format.height / template.format.width %}
  {% set labelHeight = 90 %}
  {% set labelWidth = labelHeight / aspectRatio %}
{% endif %}

<div style="position:relative; width: {{ labelWidth }}%; height: {{ labelHeight }}%;">
  <!-- tu contenido de etiqueta aquí -->
</div>

    En este código, primero calculamos la relación de aspecto de la etiqueta en función de su ancho y altura. Luego establecemos el ancho de la etiqueta al 90% del div padre. Por último, calculamos la altura en función de la relación de aspecto y aplicamos tanto el ancho como la altura como estilos en línea al div de la etiqueta. Esto asegurará que la etiqueta mantenga su proporción incluso cuando su ancho o altura sea superior.

Comments are closed.