React 组件放大图像，同时保持鼠标悬停尺寸 - React + Bootstrap

Question

所以这几天我到处找，找不到任何有用的东西。我正在使用 Bootstrap 的 React。我想要一个无状态的功能组件，它采用图像路径和 returns 一个 img 元素，当鼠标悬停在该元素上时，它会放大图像，同时保持元素的尺寸不变。

我试过：

像这样更改 onMouseOver 和 onMouseOut 事件中的样式属性

import React from "react";

const ImageHoverZoom = ({ imagePath }) => {
  return (
    <img
      src={imagePath}
      alt=""
      style={{ overflow: "hidden" }}
      onMouseOver={(e) => (e.currentTarget.style = { transform: "scale(1.25)", overflow: "hidden" })}
      onMouseOut={(e) => (e.currentTarget.style = { transform: "scale(1)", overflow: "hidden" })}
    />
  );
};

export default ImageHoverZoom;

创建自定义 css class 并将其应用于 img 元素。

index.css:

.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: all 0.3s ease 0s;
  width: 100%;
}

.hover-zoom img:hover {
  transform: scale(1.25);
}

imageHoverZoom.jsx:

import React from "react";

const ImageHoverZoom = ({ imagePath }) => {
  return (
    <img
      src={imagePath}
      alt=""
      className="hover-zoom"
    />
  );
};

export default ImageHoverZoom;

我也试过一个 class 状态为

import React, { Component } from "react";

class ImageHoverZoom extends Component {
  state = {
    path: this.props.imagePath,
    mouseOver: false,
  };

  render() {
    const { path, mouseOver } = this.state;
    return (
      <img
        className={`img-fluid w-100`}
        src={path}
        onMouseOver={() => this.setState({ mouseOver: true })}
        onMouseOut={() => this.setState({ mouseOver: false })}
        style={
          mouseOver 
            ? { transform: "scale(1.25)", overflow: "hidden"} 
            : { transform: "scale(1)", overflow: "hidden"}
        }
        alt=""
      />
    );
  }
}

理想情况下，我不喜欢使用状态，因为我知道它是异步更新的，我觉得当鼠标悬停在图像上时，这会导致客户端出现一些延迟。非常感谢任何帮助，在此先感谢您！

编辑：

我在我的项目以及一个全新的项目中尝试了下面 Rahul 的回答。这是相关的（我认为）文件。和以前一样。鼠标悬停没有变化。

App.js

import "./App.css";
import ImageHoverZoom from "./common/imageHoverZoom";

function App() {
  return <ImageHoverZoom imagePath="http://picsum.photos/400/600" />;
}

export default App;

imageHoverZoom.jsx

import React from "react";

const ImageHoverZoom = ({ imagePath }) => {
  return (
    <div className="img-wrapper">
      <img src={imagePath} alt="" className="hover-zoom" />
    </div>
  );
};
export default ImageHoverZoom;

index.css

.img-wrapper {
  overflow: hidden;
}
.hover-zoom img:hover {
  transform: scale(1.25);
}

Answer 1

将 img 标签包裹在 div 中，然后隐藏 div 的溢出：

const ImageHoverZoom = ({ imagePath }) => {
return (
    <div className="img-wrapper">
        <img
            src={imagePath}
            alt=""
            className="hover-zoom"
        />
    </div>
);
};
export default ImageHoverZoom;

将样式添加到 img-wrapper：

.img-wrapper{
  overflow:hidden;
}
img.hover-zoom:hover {
  transform: scale(1.25);
}

Answer 2

所以我在拉胡尔的帮助下解决了这个问题（谢谢！）。 css 符号被翻转，就像 Rahul 建议的那样，为了防止宽度改变，我不得不在 img.hover-zoom

中设置 width: 100%

组件如下：

const ImageHoverZoom = ({ imagePath }) => {
  return (
    <div className="img-wrapper">
      <img src={imagePath} alt="" className="hover-zoom" />
    </div>
  );
};
export default ImageHoverZoom;

index.css:

.img-wrapper {
  overflow: hidden;
}

img.hover-zoom {
  transition: all 0.3s ease 0s;
  width: 100%;
}
img.hover-zoom:hover {
  transform: scale(1.25);
}

React 组件放大图像，同时保持鼠标悬停尺寸 - React + Bootstrap

React component that zooms into an image while keeping dimensions on mouse over - React + Bootstrap

javascript

css

css-transforms

reactjs

bootstrap-4