react-simple-image-zoom
Version:
Simple image zoom/magnification component for react, using react portals
61 lines • 1.28 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=768px, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Simple Image Zoom</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* .image-zoom-container.active {
cursor: none;
} */
h1 {
margin-bottom: 10px;
}
.header {
height: 140px;
}
.toggle-control {
margin-left: 20px;
margin-bottom: 10px;
}
.controls {
width: 100%;
margin-left: 20px;
display: flex;
}
.controls > div.slider-control {
width: 45%;
}
.image-view {
display: flex;
}
.image-view > div {
width: 50%;
}
.slider > div {
width: 50%;
}
.rc-slider-mark {
top: 12px ;
font-family: monospace;
}
#portal {
margin-left: 40px;
}
#zoomScale {
margin-left: 20px;
}
h3 {
margin: 0;
}
</style>
</head>
<body>
<div id="appContainer"></div>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>