search

kitwon / vue-loading-skeleton

Vue skeleton component, automatically adapt your app.
MIT License
181 stars 12 forks source link

How to make the skeleton responsive? #12

Closed rodrigocvb closed 4 years ago

rodrigocvb commented 4 years ago

I have an image and I know its dimensions: 1080 x 1620 pixels. So I do this:

Skeleton(height="1620px" width="1080px" :duration="3.3" class="img-fluid")

img-fluid is a Bootstrap class for making an image responsive.

I load the skeleton in the middle of the screen. The actual width becomes 393.3 pixels after resizing to be adjusted to the grid layout but the height is kept with 1080 pixels. Any suggestion on how should I handle the skeleton in order to have the same aspect ratio of the original image I want to load? Thanks!

kitwon commented 4 years ago

Hi, In konwing the aspect ratio of the image, you can try:

  1. Add an outter box has reponsive width, and set the padding-top same as aspect ratio of the image padding-top: (1620/1080)*100%
  2. Set the image and the skeleton position to absolute, and the width \ height fit the outter box.
kitwon commented 4 years ago

Fell free to open.