Vue Responsive Image is a component of Vue that allows you to insert responsive image tags into your Vue project, provided you have an automated system that produces the various required image sizes.
The component calculates all source sizes and, based on the parameters passed, creates the appropriate <img> tag and its srcset attribute, and if necessary separate <source> tags for tablet image display and smartphone display.
background image responsive css, responsive background image, how to make image responsive
How to make use of it:
Install & Download:
# NPM $ npm install vue-responsive-image --save
1. VueResponsiveImage must be used as a component in your template.
<vue-responsive-image :image-url="'//via.placeholder.com/%width%x%height%'" :image-ratio="16/9" ></vue-responsive-image>
2. Complete set of options:
<vue-responsive-image :image-url="'//via.placeholder.com/%width%x%height%'" :error-image-url="'//via.placeholder.com/160x90.png/09f/fff?text=Not+Found'" :show-error-image="true" :width-on-screen="50" :width-on-screen-tablet="75" :width-on-screen-smartphone="100" :image-ratio="16/9" :alt="'test1'" :image-class="'vw50'" :mode="'all'" ></vue-responsive-image>
Create Responsive Image Tags For All Devices, Vue Responsive Image Plugin/Github
See Demo And Download
Official Website(HCESrl): Click Here