問題点
画像の上にピンを立てて、縮小や拡大をしても位置を変わらないように実現をしたいと思っています。しかし現在の状況は、縮小をすると若干ずれていく問題が生じています。下のURLからも動作が確認できると思います。
URL
https://next-image-tau.vercel.app/
リポジトリ
https://github.com/uglo1/next-image
簡単な説明
- 画像のコンポーネントがMapImage.tsxでnext/imageのlayoutで"responsive"にしています。縦と横を設定するのですが、親の要素に合わせて縦横比を保ったままスケールする感じだと思います。(https://www.forcia.com/blog/001561.html)
- index.tsxの
<div className={styles.side}>
の中で、MapImageとピンを配置しています。 - 親要素のスタイルでposition: relative; 子要素でposition: absoluteでleftとbottomを%で設定をしています。
- %で設定することで崩れないと思っているのですが、横にずれるので、そこが疑問です。%を小数点まで設定をしてもずれてしまいます。
何かアドバイスをいただけると幸いです。
コード
- MapImage.tsx
import
1 2export const MapImage = (props: any) => { 3 return ( 4 <> 5 <Image 6 src="/map.png" 7 alt="map" 8 layout={"responsive"} 9 width={600} 10 height={300} 11 /> 12 </> 13 ); 14};
- pages/index.tsx
import
1import styles from "../styles/Home.module.css"; 2import { MapImage } from "src/components/MapImage"; 3import PinDropIcon from "@material-ui/icons/PinDrop"; 4 5const Dashboard: NextPage = () => { 6 return ( 7 <> 8 <h1>Hello World</h1> 9 <div className={styles.wrapper}> 10 <div className={styles.side}> 11 <MapImage /> 12 <div className={styles.pin1}> 13 <PinDropIcon htmlColor="red" /> 14 </div> 15 <div className={styles.pin2}> 16 <PinDropIcon htmlColor="blue" fontSize="large" /> 17 </div> 18 <div className={styles.pin3}> 19 <PinDropIcon htmlColor="yellow" /> 20 </div> 21 <div className={styles.pin4}> 22 <PinDropIcon htmlColor="green" /> 23 </div> 24 <div className={styles.pin5}> 25 <PinDropIcon htmlColor="orange" /> 26 </div> 27 </div> 28 </div> 29 </> 30 ); 31}; 32 33export default Dashboard;
- Home.module.css
.container { padding: 0 2rem; } .wrapper { display: flex; } .side { width: 1200px; position: relative; } .pin1 { position: absolute; left: 47.3%; bottom: 60%; } .pin2 { position: absolute; left: 40.7%; bottom: 50%; } .pin3 { position: absolute; left: 53.5%; bottom: 25%; } .pin5 { position: absolute; left: 56%; bottom: 51%; } .pin4 { position: absolute; left: 45%; bottom: 32.5%; } .main { flex: 1; }