Как масштабировать без изменения размера фонового изображения в reactjs

Я пробовал несколько вещей, например, разные компоненты, чтобы создать образец проекта, который увеличивает и уменьшает масштаб фонового изображения, если вы нажимаете кнопку «плюс» или прокручиваете вверх, и, наконец, я придумал следующий ссылка на сайт, есть идеи как сделать неизменными высоту и ширину?

constructor(props) {
    super(props)
    this.state = {
      zoom: 1,
    }


    this.t = undefined
    this.start = 100
    this.repeat = this.repeat.bind(this)
    this.onMouseDown = this.onMouseDown.bind(this)
    this.onMouseUp = this.onMouseUp.bind(this)
    this.zoom = this.zoom.bind(this)
    this.zoomOut = this.zoomOut.bind(this)
  }
  zoom(){
    this.setState({zoom: this.state.zoom + 0.012})
  }
  repeat() {
    this.zoom()
    this.t = setTimeout(this.repeat, this.start)
    this.start = this.start / 8
  }

  onMouseDown() {
    this.repeat()
  }
  onMouseUp() {
    clearTimeout(this.t)
    this.start = 100
  }
  zoomOut(){
    this.setState({
      zoom: 1
    })
  }


        {/* <p className = "App-intro"> */}

        <div className = "Wrapper">
          <div className = "zoomControl"> 
            <div className = "zoom" style = {{transform: 'scale('+ this.state.zoom +')'}}></div>
              <button className = "zoomIn" onMouseUp = {this.onMouseUp} onMouseDown = {this.onMouseDown} style = {{marginTop:"550px"}}>+</button>
              <button className = "zoomOut" onClick = {this.zoomOut}>-</button>

и css

.zoom {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: absolute;
  /* transition: background-size 4s ease; */

  /* background: green; */
  background-image: url('./SampleJPGImage_50kbmb.jpg');
  /* background-repeat: none; */
  /* margin-top: 500px; */
}

.Wrapper{
  width:250px !important;
  height: 250px !important;
  display: inline-block;
  overflow: hidden;
}

javascript css reactjs zooming

15.06.2018 12:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 915

Ответы 2

Вы не можете действительно увеличивать / уменьшать масштаб вашего фонового изображения, но вот простой трюк, как достичь той же функциональности, используя transform: scale(<value>) на div, содержащем ваше изображение background: url(<url>);

class App extends React.Component {

  state = {
    scale: 1,
  }
  
  zoomIn = () => {
     this.setState({ scale: this.state.scale * 2 });
  }
  
  zoomOut = () => {
    this.setState({ scale: this.state.scale / 2 });
  }

  render() {
    return (
      <div className = "container">
        <div
          className = "bg-image-wrapper"
          style = {{ 'transform': `scale(${this.state.scale})` }}
        />
        <div className = "content">
          <button onClick = {this.zoomIn}>Zoom in</button>
          <button onClick = {this.zoomOut}>Zoom out</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('react'));

.container {
  display: block;
  position: relative;
  margin: 10px;
  height: 300px;
  width: 600px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.bg-image-wrapper {
  position: absolute;
  background: url('http://ns328286.ip-37-187-113.eu/ew/wallpapers/800x480/12840_800x480.jpg');
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 0.4s;
  
}

.content {
  position: relative;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id = "react"></div>

Я попробовал то, что вы мне предложили (с помощью приложения create-response-app), но я получаю следующую ошибку: TypeError: не удается прочитать свойство setState для undefined, что я делаю не так?

— 15.06.2018 13:18

@Yannis_K Эй, чувак, ты нашел решение? Ошибка, о которой вы говорите, очень распространена, пожалуйста, дайте мне более подробную информацию.

— 17.06.2018 12:21

15.06.2018 12:41

.zoomdiv{
margin: 0 auto;
margin-top: 10%;
width: 320px;

}
img.zoom{
transition: transform .2s;
}
img.zoom:hover {
  transform: scale(3.5);
}

<div class = "zoomdiv">
<img class = "zoom" src = "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width = "100" />
<img class = "zoom" src = "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width = "100" />
<img class = "zoom" src = "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width = "100" />
<img class = "zoom" src = "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width = "100" />
<img class = "zoom" src = "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width = "100" />
<img class = "zoom" src = "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width = "100" />
<img class = "zoom" src = "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width = "100" />
</div>

15.06.2018 12:48

Другие вопросы по теме

CSS заполняет родительскую высоту и остается с

Css как мне найти файл css в инспекторе

Карточка Flex с двумя рядами

Оранжевый цвет на активной кнопке по умолчанию

Необычный дизайн фона CSS

Проблема перехода на боковую панель семантического пользовательского интерфейса

Как я могу вставить тег в поле ввода

Интерфейс интерфейса в интерактивном стиле дерева решений

Не удается заставить .container правильно работать с Twig / Bootstrap

Перенос по словам не учитывает родительскую ширину для длинного неразрывного текста

Как масштабировать без изменения размера фонового изображения в reactjs

Ответы 2

Другие вопросы по теме

Похожие вопросы