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

Posted 2023-03-06

【中文标题】放大图像同时保持鼠标悬停尺寸的 React 组件 - React + Bootstrap

【英文标题】：React component that zooms into an image while keeping dimensions on mouse over - React + Bootstrap

【发布时间】：2020-11-20 06:18:39

【问题描述】：

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

我试过了：

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

import React from "react";

const ImageHoverZoom = ( imagePath ) => 
  return (
    <img
      src=imagePath
      
      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 类并将其应用于 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
      
      className="hover-zoom"
    />
  );
;

export default ImageHoverZoom;

我也试过一个带状态的类组件

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

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

编辑：

我在我的项目以及一个全新的项目中尝试了以下 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  className="hover-zoom" />
    </div>
  );
;
export default ImageHoverZoom;

index.css

.img-wrapper 
  overflow: hidden;

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

【参考方案1】：

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

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

将样式添加到 img-wrapper:

.img-wrapper
  overflow:hidden;

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

【讨论】：

所以我在我的项目中尝试了你的建议，并将它隔离到一个新项目中，因为我认为我的问题可能与引导程序有关。不幸的是，它的行为仍然不正确（请参阅我的编辑）。

@Jurij 你能试试这个img.hover-zoom，而不是css中的hover-zoom img

缩放部分现在可以工作了！但是，图像仍然会增长而不是保持尺寸:(

好的，我通过在img.hover-zoom 中添加width: 100% 解决了尺寸问题。感谢您的帮助！

【参考方案2】：

所以我在 Rahul 的帮助下解决了这个问题（谢谢！）。就像 Rahul 建议的那样，css 符号被翻转了，为了防止宽度发生变化，我不得不在 img.hover-zoom 中设置 width: 100%

这是组件：

const ImageHoverZoom = ( imagePath ) => 
  return (
    <div className="img-wrapper">
      <img src=imagePath  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);