Je choisis Vuetify pour mon projet. Grand cadre frontaleux. La question est de savoir comment faire V-parallaxe pour afficher l'image complète sans recadrer. Certains montrent du code ci-dessous et le code complet est hébergé dans le code PEN > https://codepen.io/tonywangcn/pen/wenyq
merci!
5 Réponses :
Vous pouvez simplement utiliser Vous pouvez voir Utiliser ici
Notez que vous avez besoin que les conteneurs parent ont également une hauteur de 100% pour que cela fonctionne hauteur = "100%" pour résoudre ce
Merci pour votre réponse rapide. Malheureusement, ça ne marche pas. Il suffit d'afficher la moitié inférieure de l'image complète. Image complète ici Blog-Images-Bucket.s3 .amazonaws.com / media / privé / ...
@Tonywang fonctionne bien dans mon codépen. Ajouter plus d'éléments afin que la page soit plus grande, vous le verrez
Ouais, faites glisser le chrome assez haut ... mais y a-t-il une meilleure solution. Supposant que l'utilisateur ait juste une hauteur et une largeur fixes, et comment déployer la grande image dans un petit conteneur?
@Tonywang définit ensuite un récipient plus petit et placez la parallaxe dedans, donnez ce conteneur une hauteur fixe.
Vous pouvez simplement définir la hauteur de l'IMG = "100%" pour résoudre ce problème.
J'ai été confronté à un problème similaire avec ce composant. J'essayais d'échanger dans l'image dans le cadre d'une charge paresseuse, mais le composant ne le rendait pas avec précision. Au lieu de cela, le composant a recadré l'image gravement. Réglage de: SRC = "" Attribut à la bonne image immédiatement et choisissez une image plus grande que largeur travaillée.
Le problème ici n'est pas la hauteur, c'est la propriété transformer code> qui oblige la largeur de l'image. Malheureusement, il n'y a pas de multiple dans le composant de parallaxe de Vuety pour ajuster la largeur de l'image afin que tout ce que vous puissiez faire est d'ajuster les dimensions de l'image ou d'écraser la propriété de transformation: .v-parallax__image {
transform: none !important;
width: 100% !important;
}
Essayez Insérer V-parallaxe à l'intérieur de V-mise en page et V-flex.
<v-layout row wrap>
<v-flex xs12 sm12>
<v-parallax :src="getImageUrl('art01.jpg')">
<v-layout column align-center justify-center>
<h1>title</h1>
</v-layout>
</v-parallax>
</v-flex>
</v-layout>
<script>
export default {
methods: {
getImageUrl(img) {
return require(`~/assets/user/images/${img}`)
}
},
}
</script>