search

XiongAmao / vue-easy-lightbox

A tiny lightbox component for Vue.js 3.0 :tada::tada: https://xiongamao.github.io/vue-easy-lightbox/
MIT License
409 stars 68 forks source link

How to show images in center of screen? #58

Closed kentforth closed 3 years ago

kentforth commented 3 years ago

I have many images in block When I click one of images, an image doesn't shows in center of screen I need an image to be sxactly in center of screen vertically even If I scroll page to bottom and clikc on last image. How to show images in center of screen? Is there something that I can change with CSS?

<div class="works">
      <div
        class="image"
        v-for="(image, index) in images"
        :key="index"
        @click="showSingleImage(index)"
      >
        <img :src="image" :alt="index"/>
      </div>
    </div>
    <client-only>
      <vue-easy-lightbox
        :visible="visible"
        :index="index"
        :imgs="images"
        @hide="visible = false"
      />
    </client-only>

Video

XiongAmao commented 3 years ago

It seems that position: fixed is not working. Can you provide a repo that can reproduce this issue？

kentforth commented 3 years ago

Do you mean repository of my project that uses the library?

XiongAmao commented 3 years ago

I guess the problem might be that if vue-easy-lightbox's root elements has an ancestor with a transform, perspective or filter property set to something other than none, vue-easy-lightbox will be positioned fixed relative to that ancestor element. You can try putting vue-easy-lightbox under an element that doesn't have the above css style.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

position: fixed The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

kentforth commented 3 years ago

@XiongAmao The problem was that parent div had transform property. I placed easy-lightbox in another div and the probllem is gone. Thank you!