Блог

Я пытаюсь прикрепить divs к изображению. Проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы divs могли оставаться в одном и том же месте, даже когда изображение масштабируется вверх или вниз. Кто-нибудь знает, что я должен делать? У меня есть position: absolute для divs, но они и из-за того, что я использую поля, которые я использую, divs не остаются в том месте, где они должны, когда изображение масштабируется.

Реагирующий код:

 import React from 'react';

import './map.styles.scss'

import map from '../../assets/MAP.PNG';



export default class NgtiMap extends React.Component {
    constructor() {
        super();

        this.state = {
            selected: 0,
            reserved: [10, 11]
        } 
    }

    render() {
        return(
            <div className="ngti-map">
                <img className="mapImg" src={map} alt="ngti-map"/>
                <div onClick={() =>this.state.reserved.some(item => item === 1) ? null :  this.state.selected === 1 ? this.setState({selected: 0}) : this.setState({selected: 1})} alt="1" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 1) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 1) ? null :this.state.selected === 1 ? 'selected' : ''}`}>{this.state.reserved.some(item => item === 1) ? 'reserved' :'1'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 2) ? null : this.state.selected === 2 ? this.setState({selected: 0}) : this.setState({selected: 2})} alt="2" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 2) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 2) ? null : this.state.selected === 2 ? 'selected' : ''}`} style={{marginTop: '130px', marginLeft: '758px', width: '147px', height: '25px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 2) ? 'reserved' :'2'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 3) ? null : this.state.selected === 3 ? this.setState({selected: 0}) : this.setState({selected: 3})} alt="3" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 3) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 3) ? null : this.state.selected === 3 ? 'selected' : ''}`} style={{marginTop: '215px', marginLeft: '758px', width: '147px', height: '25px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 3) ? 'reserved' :'3'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 4) ? null : this.state.selected === 4 ? this.setState({selected: 0}) : this.setState({selected: 4})} alt="4" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 4) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 4) ? null : this.state.selected === 4 ? 'selected' : ''}`} style={{marginTop: '300px', marginLeft: '758px', width: '147px', height: '25px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 4) ? 'reserved' :'4'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 5) ? null : this.state.selected === 5 ? this.setState({selected: 0}) : this.setState({selected: 5})} alt="5" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 5) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 5) ? null : this.state.selected === 5 ? 'selected' : ''}`} style={{marginTop: '385px', marginLeft: '758px', width: '147px', height: '24px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 5) ? 'reserved' :'5'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 6) ? null : this.state.selected === 6 ? this.setState({selected: 0}) : this.setState({selected: 6})} alt="6" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 6) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 6) ? null : this.state.selected === 6 ? 'selected' : ''}`} style={{marginTop: '469px', marginLeft: '758px', width: '147px', height: '24px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 6) ? 'reserved' :'6'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 7) ? null : this.state.selected === 7 ? this.setState({selected: 0}) : this.setState({selected: 7})} alt="7" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 7) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 7) ? null : this.state.selected === 7 ? 'selected' : ''}`} style={{marginTop: '590px', marginLeft: '864px', width: '92px', height: '8px', padding: '60px 0'}}>{this.state.reserved.some(item => item === 7) ? 'reserved' :'7'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 8) ? null : this.state.selected === 8 ? this.setState({selected: 0}) : this.setState({selected: 8})} alt="8" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 8) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 8) ? null : this.state.selected === 8 ? 'selected' : ''}`} style={{marginTop: '590px', marginLeft: '956px', width: '92px', height: '8px', padding: '60px 0'}}>{this.state.reserved.some(item => item === 8) ? 'reserved' :'8'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 9) ? null : this.state.selected === 9 ? this.setState({selected: 0}) : this.setState({selected: 9})} alt="9" value="2" className={`zone-to-reserve ${this.state.reserved.some(item => item === 9) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 9) ? null : this.state.selected === 9 ? 'selected' : ''}`} style={{marginTop: '590px', marginLeft: '1048px', width: '125px', height: '8px', padding: '60px 0'}}>{this.state.reserved.some(item => item === 9) ? 'reserved' :'9'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 10) ? null : this.state.selected === 10 ? this.setState({selected: 0}) : this.setState({selected: 10})} alt="10" value="7" className={`zone-to-reserve ${this.state.reserved.some(item => item === 10) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 10) ? null : this.state.selected === 10 ? 'selected' : ''}`} style={{marginTop: '130px', marginLeft: '1001px', width: '87px', height: '28px', padding: '32px 0'}}>{this.state.reserved.some(item => item === 10) ? 'reserved' :'10'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 11) ? null : this.state.selected === 11 ? this.setState({selected: 0}) : this.setState({selected: 11})} alt="11" value="8" className={`zone-to-reserve ${this.state.reserved.some(item => item === 11) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 11) ? null : this.state.selected === 11 ? 'selected' : ''}`} style={{marginTop: '130px', marginLeft: '1140px', width: '169px', height: '31px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 11) ? 'reserved' :'11'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 12) ? null : this.state.selected === 12 ? this.setState({selected: 0}) : this.setState({selected: 12})} alt="12" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 12) ? 'reserved' : ''} ${ this.state.reserved.some(item => item === 12) ? null : this.state.selected === 12 ? 'selected' : ''}`} style={{marginTop: '340px', marginLeft: '957px', width: '130px', height: '23px', padding: '40px 0'}}>{this.state.reserved.some(item => item === 12) ? 'reserved' :'12'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 13) ? null : this.state.selected === 13 ? this.setState({selected: 0}) : this.setState({selected: 13})} alt="13" value="3" className={`zone-to-reserve ${this.state.reserved.some(item => item === 13) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 13) ? null : this.state.selected === 13 ? 'selected' : ''}`} style={{marginTop: '351px', marginLeft: '1142px', width: '96px', height: '20px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 13) ? 'reserved' :'13'}</div>
            </div>
        );
    }
}
  

Код CSS:

 .ngti-map {
    .mapImg {
        position: absolute;
        width: 80%;
        margin: 0 auto;
    }

    .zone-to-reserve {
        position: absolute;
        margin-top: 603px;
        margin-left: 149px;
        width: 92px;
        height: 31px;
        background-color: green;
        opacity: 50%;
        color: transparent;
        text-align: center;
        padding: 40px 0;
        font-weight: bold;

        amp;:hover {
            opacity: 80%;
            color: black;
        }

        amp;.selected {
            opacity: 90%;
            color: black;
        }
    }
    .reserved {
        background-color: grey;
        opacity: 90%;
        color: transparent;
        text-align: center;
        padding: 45px 0;

        amp;:hover {
            color: black;
            opacity: 90%;
        }
    }
}