小编sn4*_*4ke的帖子

使用具有不同图像尺寸的 Nextjs Image 组件

我正在尝试将 Next.js 图像组件与所有具有唯一尺寸的图像一起使用。他们的示例指出图像将拉伸到父 div 的宽度和高度。我尝试过包装它们,但不知道如何适应动态图像尺寸。我想要一个设定的宽度和高度来调整每个相应的比例。TIA。

这是我的代码(图像来自数组)——因为我没有设置高度,所以页面上不会呈现任何内容。如果我使用 Tailwind,h-auto它仍然不显示:

<div className="w-screen h-screen">
  {allImages.allImages.map((image, i) => {
    return (
      <div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
        <Image priority src={`/${image}`} layout="fill" objectFit="cover" />
      </div>
  )})}
</div>
Run Code Online (Sandbox Code Playgroud)

next.js tailwind-css nextjs-image

7
推荐指数
1
解决办法
4182
查看次数

使用three.js和tween.js以90度为增量旋转对象以创建360循环

我有一个工作动画,不是我想要的方式.

我希望物体旋转90度延迟(工作)然后继续旋转90度,最终永远循环.无论我做什么,它总是重置.即使我设置4个补间将我带到360,最后一个补零的补间也会使整个对象在相反方向旋转.

谢谢

var width = 1000;
var height = 600;
var scene = new THREE.Scene();
var group = new THREE.Object3D(); //create an empty container

var camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, -500, 1000);
camera.position.x = 180;
camera.position.y = 180;
camera.position.z = 200;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xf0f0f0);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(300, 300, 300);
var material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    shading: THREE.SmoothShading,
    overdraw: 0.5
}); …
Run Code Online (Sandbox Code Playgroud)

javascript rotation three.js tween.js

3
推荐指数
1
解决办法
5503
查看次数