时间戳

首页 > 解决方案 > 图像不会使用这些脚本调整大小

javascript - 图像不会使用这些脚本调整大小

问题描述

我正在尝试使用 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',
})

这是代码的结果。

标签： javascripthtmlcssthree.jsgsap

解决方案

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

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

推荐阅读