Press "Enter" to skip to content

Create Responsive With An Optimal Number Of Images For All Devices

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

Display An Image In A Responsive Imagebox Without jQuery

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

This superior jQuery/javascript plugin is developed by HCESrl. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.