0
286
ViewsNuxt/Imagen: ¿cuál es la diferencia en fit="inside/outside"?
¿Cuál es la diferencia entre esas claves, según la documentación ?
"interior: preservando la relación de aspecto, cambie el tamaño de la imagen para que sea lo más grande posible y asegúrese de que sus dimensiones sean menores o iguales a las especificadas".
"fuera: conservando la relación de aspecto, cambie el tamaño de la imagen para que sea lo más pequeña posible y asegúrese de que sus dimensiones sean mayores o iguales a las especificadas".
¿Cómo debo entenderlo? Digamos en referencia a
"cover: (predeterminado) conservando la relación de aspecto, asegúrese de que la imagen cubra ambas dimensiones proporcionadas recortando/recortando para ajustar"
Lo que no dice que la imagen se redimensiona, ¿no es así? ¿Y cuál es el caso de uso para el interior y el exterior?
1 answers
Answer question0
El enfoque más simple para resolver esto es probablemente ir a Unplash y elegir una foto de retrato como esta: https://unsplash.com/photos/wQe5nEi5zG4
Tráigalo al directorio /static de Nuxt y cárguelo en su página con lo siguiente
<template> <div> <nuxt-img fit="cover" src="/flower.jpg" width="800" height="200" /> <nuxt-img fit="inside" src="/flower.jpg" width="800" height="200" /> <nuxt-img fit="outside" src="/flower.jpg" width="800" height="200" /> </div> </template> <style scoped> img { border: 2px solid red; } </style> Luego, verá que la cover es principalmente object-fit="cover" como se explica en MDN .
Será recortado de alguna manera por el tamaño más pequeño del div.
Los otros 2 son un poco más difíciles de entender, pero es más fácil si ve el resultado real con las herramientas de desarrollo.
En la pestaña de network , puedes ver que el tamaño es bastante diferente (se conserva el orden de las imágenes).
Si va a la pestaña Elements y verifica el valor allí, podrá ver que la imagen:
-
keep it's aspect ratio -
resize itself to be at MAXIMUM 200px wide(mínimo entre 800 y 200)
De ahí que el tamaño de la imagen final (tamaño intrínseco) sea de 133 x 200 px.
El otro será al contrario:
-
keep it's aspect ratio -
resize itself to be at MINIMUM at 800px wide(máximo entre 800 y 200).
Este será bastante más HD, con 800 x 1200px.
