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.

  • es.davy.ai/
  • Programación /
  • nuxt/vue2 cómo establecer el ancho de los div apilados para que coincidan con un div específico en la pila.

nuxt/vue2 cómo establecer el ancho de los div apilados para que coincidan con un div específico en la pila.

06 Aug, 2023 Programación

No puedo encontrar la pregunta exacta, así que si esto es una duplicación, por favor rediríjame.
Estoy trabajando con Nuxt. Tengo un componente de imagen que debería ser capaz de manejar diferentes imágenes de anchos variables. La imagen cambiará según la vista móvil/escritorio, lo que significa que la imagen puede volverse más amplia/más estrecha según la pantalla. Debajo y encima de ella tengo un título y una descripción algo así:

<div> //caja flexible con dirección de flexión de columna y justificación central
  <h2>{{insightsImage.title}}
  <img :src='ifMobile ? mobileImage.url : image.url'>
  <p>some text could be very long</p> 
</h2></div>

Lo que me gustaría es que el título y el párrafo (<p>) tengan el mismo ancho máximo que la imagen en TODO momento y que estén centrados en la página. Por lo tanto, si tengo una descripción muy larga, se corta y se mantiene apilada ordenadamente.

Algo así:

(Imagen de muestra)

He probado varios métodos y tengo una solución que funciona, pero me pregunto si hay una mejor manera, quizás más a la manera de Vue.

Idealmente, me gustaría hacer esto solo con CSS, pero no he encontrado ninguna solución que funcione con anchos de imagen variables.

Mi solución actual es la siguiente:

<div>
  <h2 :style='max-width: ${imageSize}'>{{insightsImage.title}}
  <img :src='ifMobile ? mobileImage.url : image.url'>
  <p :style='max-width: ${imageSize}'>some text</p> 
</h2></div>

export default defineComponent({
  computed: {
    imageSize(): string {
      if (!process.browser) return '' // esto es necesario porque el objeto Image no existe en el lado del servidor
      const image = new Image();
      image.src = this.image.url;

      return `${image.width > 0 ? image.width : 800}px` // esto es necesario para verificar si devuelve 0 como ancho inicialmente (puede ser debido a SSR), y la mayoría de las imágenes tendrán una anchura mínima de 800px
    }
  }
})

De todas las soluciones que he encontrado, esta es la que parece menos “chapucera”, pero aún no es perfecta.

He investigado el uso de referencias (refs) de esta manera:
Enlace a Stack Overflow

Pero la documentación oficial no recomienda (ab)usar referencias en propiedades computadas, Y dado que la referencia no se actualiza, el ancho computado no cambia si cambia el src de la imagen.

¿Alguna otra sugerencia?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución es utilizar CSS flexbox y configurar el contenedor padre con una dirección de columna y un justificado al centro. A continuación, se establece la imagen con un ancho máximo del 100% y una altura automática para mantener la relación de aspecto. Por último, se establece el título y la descripción con un ancho máximo del mismo valor que la imagen, utilizando variables CSS para simplificar la actualización de los valores. Aquí tienes un ejemplo:

    <template>
  <div class="container">
    <h2 class="title">{{ insightsImage.title }}</h2>
    <div class="image-container">
      <img :src="ifMobile ? mobileImage.url : image.url" class="image">
    </div>
    <p class="description">{{ insightsImage.description }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    ifMobile() {
      // devolver true o false en función del ancho del dispositivo actual
    },
    imageWidth() {
      // devolver el ancho actual de la imagen dinámicamente, por ejemplo, utilizando refs o window.innerWidth
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-container {
  max-width: 100%;
  margin: 0 auto;
}

.image {
  max-width: 100%;
  height: auto;
}

.title,
.description {
  max-width: var(--image-width);
  margin: 0 auto;
}
</style>

    Al utilizar variables CSS, podemos actualizar el valor de --image-width de forma dinámica en la propiedad computada y hacer que se propague a los elementos hijos sin necesidad de actualizarlos individualmente. Esta solución debería funcionar independientemente de los valores específicos de los anchos de imagen y los anchos de dispositivo, siempre y cuando se mantenga la relación de aspecto de la imagen.

Comments are closed.