React组件可以放大图像，同时将尺寸保持在鼠标上-React+Bootstrap

Question

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

我试过：

1. 更改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;

2. 创建一个自定义css类并将其应用于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;

3. 我还尝试了一个带有state的类组件

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=""
/>
);
}
}

理想情况下，我不想使用state，因为我知道它是异步更新的，我觉得当鼠标悬停在图像上时，这会导致客户端出现一些滞后。非常感谢您的帮助，提前谢谢！

编辑：

我在我的项目以及一个全新的项目中尝试了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包装器：

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

Answer 2

所以我在Rahul的帮助下解决了这个问题(谢谢！(。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);
}