images centered
Browse files
Remotion-app/src/HelloWorld/ImageStream.jsx
CHANGED
@@ -118,12 +118,24 @@ const Images = ({entry}) => {
|
|
118 |
|
119 |
<Img
|
120 |
style={{
|
121 |
-
transform: `scale(${zoom}) ${
|
122 |
initialSpring > 0.99
|
123 |
? `translateX(${blur * 5}px)`
|
124 |
: `translateX(-${blur * 5}px)`
|
125 |
}`,
|
126 |
filter: `url(#blur)`,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
127 |
// opacity: 0.1
|
128 |
// transform: `translateX(-${blur * 5}px)`,
|
129 |
// transition: 'all 5s ease',
|
|
|
118 |
|
119 |
<Img
|
120 |
style={{
|
121 |
+
transform: ` scale(${zoom}) ${
|
122 |
initialSpring > 0.99
|
123 |
? `translateX(${blur * 5}px)`
|
124 |
: `translateX(-${blur * 5}px)`
|
125 |
}`,
|
126 |
filter: `url(#blur)`,
|
127 |
+
objectPosition: 'center',
|
128 |
+
objectFit: 'cover',
|
129 |
+
|
130 |
+
position: 'absolute',
|
131 |
+
top: '50%', // Center vertically
|
132 |
+
left: '50%', // Center horizontally
|
133 |
+
transform: 'translate(-50%, -50%)',
|
134 |
+
// zIndex: 150,
|
135 |
+
// height: '100vh',
|
136 |
+
width: 1080,
|
137 |
+
height: 1920,
|
138 |
+
// transformOrigin: 'center center', // Move rotation origin to the
|
139 |
// opacity: 0.1
|
140 |
// transform: `translateX(-${blur * 5}px)`,
|
141 |
// transition: 'all 5s ease',
|