mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 03:32:06 +00:00
Center and outzoom graphics iframe previews to avoid clipping
This commit is contained in:
@@ -188,13 +188,18 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
|
|||||||
background-size: 20px 20px;
|
background-size: 20px 20px;
|
||||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphics-preview__frame {
|
.graphics-preview__frame {
|
||||||
width: 1920px;
|
--preview-zoom: 0.85;
|
||||||
height: 1080px;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: calc(100% / var(--preview-zoom));
|
||||||
|
height: calc(100% / var(--preview-zoom));
|
||||||
border: 0;
|
border: 0;
|
||||||
transform: scale(calc(100cqw / 1920));
|
transform: translate(-50%, -50%) scale(var(--preview-zoom));
|
||||||
transform-origin: top left;
|
transform-origin: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user