Within my current project, I am utilizing vue.js 2 and have implemented an img component.
Below is the code for this component:
<template>
<div class="banner">
<img class="banner-img" :src="bannerImg"/>
</div>
</template>
<script>
export default {
name: 'DetailBanner',
props: {
sightName: String,
bannerImg: String,
gallaryImgs: Array
}
}
</script>
<style lang="stylus" scoped>
.banner
position: relative
overflow: hidden
height: 0
padding-bottom: 55%
.banner-img
width: 100%
The URL of the image used is :
In this case, I do not wish to display the image on the page, hence why I have set the height to 0 in the CSS.
Unfortunately, the attempt was unsuccessful. I even tested removing the height: 0, but it did not change anything.
Can anyone explain why setting the height to 0 is not working as expected?