图像不会使用这些脚本调整大小答案

【问题标题】：Image won't resize with these scripts图像不会使用这些脚本调整大小
【发布时间】：2021-08-27 21:13:19
【问题描述】：

我正在尝试使用 css 和 javascript 在图像上实现悬停效果，它可以工作，但我似乎无法调整图像大小！这是代码：

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blonded</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <section class="gallery">
    <div class="imageContainer1">
    </div>

  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
  <script src="./hover-effect.js"></script>
  <script src="./app.js"></script>
</html>

CSS

.gallery {
  display: flex;
  padding: 2rem;
  justify-content: center;
  align-items: center;
}
.imageContainer1 {
  padding: 1rem;
  width: 75%;
  overflow: hidden;
  text-align: center;
}
#imageone {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}

JavaScript

new hoverEffect ({
  parent: document.querySelector('.imageContainer1'),
  image1: 'img/bdcmag2.jpg',
  image2: 'img/bdcmag.jpg',
  displacementImage: 'img/displacement.jpg',
})

这是代码的result。

【问题讨论】：

可能值得一提的是，您使用的 new hoverEffect() 不是 JS 原生库
我将它添加到我的 html 文件的底部，但它是 Three.js 和 gsap.js。这一切都来自这里：github.com/robin-dela/hover-effect - ./hover-effect.js 也在“hover-effect/dist/hover-effect.js”下的指南中
您应该将它作为标签添加到问题中，以便熟悉这些库的人可以看到它
请发minimal, complete, and verifiable example。

标签： javascript html css three.js gsap

【解决方案1】：

您没有在任何地方声明.imageContainer1 的高度。只需使用height 让它更高：

.imageContainer1 {
  padding: 1rem;
  width: 75%;
  height: 100vh;
  overflow: hidden;
  text-align: center;
}

【讨论】：

还是一样的大小:(