fix: chagne style

src/Components/deviceFrame/index.js

@@ -21,12 +21,18 @@ var configMap = {
 		width: "666px",
 		height: "321px",
 		offsetv: "4px",
+		imgStyle: {
+			marginTop: '-5px',
+		},
 	},
 	"android-v": {
 		bkg: androidVPng,
 		width: "321px",
 		height: "666px",
 		offsetv: "5px",
+		imgStyle: {
+			marginLeft: '2px',
+		},
 	},
 	"iphone-h": {
 		bkg: iphoneVPng,
@@ -39,11 +45,11 @@ var configMap = {
 	},
 	"iphone-v": {
 		bkg: iphoneVPng,
-		width: "322px",
-		height: "693px",
+		width: "325px",
+		height: "690px",
 		styles: {
 			borderRadius: '13px'
-		}
+		},
 	},
 	"ipad-h": {
 		bkg: ipadHPng,
@@ -52,7 +58,8 @@ var configMap = {
 		height: "478px",
 		offsetv: "5px",
 		imgStyle: {
-			transform: 'rotate(-90deg) translate(0, -3px)',
+			marginTop: '-2px',
+			transform: 'translate(-50%, -50%) rotate(-90deg)',
 		},
 		styles: {
 			transform: "translate(-50%, -50%)",
@@ -64,7 +71,8 @@ var configMap = {
 		height: "646px",
 		offsetv: "5px",
 		imgStyle: {
-			transform: 'translate(0, -2px)',
+			marginTop: '-2px',
+			transform: 'translate(-50%, -50%)',
 		},
 		styles: {
 			transform: "translate(-50%, -50%)",
@@ -152,7 +160,15 @@ function DeviceFrame(props) {
 				</Alert>
 			</Snackbar>
 			<div>
-				<img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none', ...config.imgStyle }} />
+				<img src={config.bkg} alt="background" style={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					zIndex: 100,
+					transform: `translate(-50%, -50%) ${config.rotate ? "rotate(-90deg)" : ''}`,
+					pointerEvents: 'none',
+					...config.imgStyle
+				}} />
 				{props.htmlUrl && (
 					<iframe
 						id="deviceFrame"