除非将鼠标悬停在

问题描述

在我的React网站上，我有一个过去项目的屏幕快照的垂直列表，当页面第一次加载图像时，它只是一个条，直到用户将鼠标悬停在它们上面。

将鼠标悬停在图像上时，它们会放大到完整尺寸，然后可以正常工作。我希望防止用户将鼠标悬停在它们上以使其正确加载。
该列表是从数组映射的

items: [
        {
          image: "./images/spokanepowerstroke.jpg",title: "Spokane Power stroke",link: "/powerstroke",},...
      ]

<Col md="auto">
      {this.state.items.map(({ title,image,link }) => (
        <motion.div className="thumbnail" variants={thumbnailVariants}>
          {" "}
          <motion.div 
          key={title}
            className="frame"
            whileHover="hover"
            variants={frameVariants}
            transition={transition}
          >
            <p className="projectstitle">{title}</p>
            <Link to={link}>
              <motion.img
                src={image}
                alt={image}
                variants={imageVariants}
                transition={transition}
              />
            </Link>
          </motion.div>
        </motion.div>
      ))}
</Col>

悬停和过渡效果由成帧器运动控制。

const transition = { duration: 0.5,ease: [0.43,0.13,0.23,0.96] };

const thumbnailVariants = {
  initial: { scale: 0.9,opacity: 0 },enter: { scale: 1,opacity: 1,transition },exit: {
    scale: 0.5,opacity: 0,transition: { duration: 1.5,...transition },};

const frameVariants = {
  hover: { scale: 0.95 },};

const imageVariants = {
  hover: { scale: 1.1 },};
const changepage = {
  in: {
    opacity: 1,out: {
    opacity: 0,};
const pagetransition = {
  duration: 1.5,};

我查看了我的代码，没有发现图像仅部分加载的原因。该网站可在此处Website浏览 Github仓库以及所有代码都在这里 Github （项目页面）
预先感谢您的专业知识。

解决方法

在您的App.css代码中，更改以下内容： .thumbnail img { width: 46vw; height: 100%; }

到height:auto;

％的高度通常会拉伸/扭曲图像，如果要保持宽高比，请使用auto

也许在代码中的img元素上设置width和height可能有助于防止尺寸问题，因为现在浏览器不知道图像的实际大小，并且由于它是通过React JS而不是HTML加载的第一次使用它可能无法计算，直到悬停动画强制重新绘制为止。

framer-motion html javascript reactjs reactjs