vue-zoomster/dist/ZoomSter.css

A Vue 2 component for image zoom, rotate, and download

.image-preview-container{position:relative;overflow:hidden}.thumbnail-wrapper{width:100%;cursor:pointer}.preview-thumbnail{width:100%;height:auto;object-fit:cover}.expand-icon{position:absolute;bottom:10px;right:10px;background:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.expand-icon img{width:20px;height:20px}.modal-viewer{position:fixed;z-index:9999;top:0;left:0;width:100vw;height:100vh;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center}.back-button{position:fixed;top:10px;left:10px;background:white;border:none;border-radius:5px;font-size:16px;padding:8px;z-index:10000}.image-wrapper{max-width:100vw;max-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.image-zoomable{will-change:transform}.controls{margin:20px 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.controls button{background:#27272c;color:#fff;border:none;border-radius:6px;padding:10px 14px;font-size:16px;cursor:pointer}.btn.view-btn{padding:10px 16px;border-radius:6px;background:#444;color:#fff;border:none;cursor:pointer}