Javascript 图像赢得'；不能使用这些脚本调整大小_Javascript_Html_Css_Three.js_Gsap

Javascript 图像赢得'；不能使用这些脚本调整大小

javascript html css three.js

Javascript 图像赢得'；不能使用这些脚本调整大小,javascript,html,css,three.js,gsap,Javascript,Html,Css,Three.js,Gsap,我正试图用css和javascript在图像上实现悬停效果，效果很好，但我似乎无法调整图像的大小！代码如下： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&quo

我正试图用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>

JavaScript

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

这是代码的最新版本。

您没有在任何地方声明

.imageContainer1

的高度。只要用

高度把它调高就行了

：

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

可能值得一提的是，您使用的库作为

new hoverEffect（）

不是JSi的本机库。我将它添加到html文件的底部，但它是Three.js和gsap.js。全部内容如下：./hover-effect.js也在“hover-effect/dist/hover-effect.js”下的指南中。您应该将其作为标签添加到问题中，以便熟悉这些LIB的人可以看到。请制作一个。大小仍然相同：(

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