小编wsg*_*sgg的帖子

Chrome自动播放政策-Chrome 76

我正在构建一种在Chrome上运行的信息亭媒体，该媒体可以播放带有音频的视频。我知道默认情况下，chrome仅允许自动播放带有静音道具的视频。

而且我知道我能够通过chrome：// flags /＃autoplay-policy在chrome中启用标志来覆盖此功能

我刚刚更新到Chrome 76，该标记似乎已消失，视频的自动播放似乎不再起作用！

知道我该如何克服吗？

[Chrome 76.0.3809.100（官方内部版本）（64位）] Mac OS Mojave

google-chrome autoplay

wsg*_*sgg

lucky-day

10
推荐指数

2
解决办法

3677
查看次数

填充容器宽度的等高图像网格

这就是我想要实现的目标：

1 行，里面有 3 张图像。
1 行，里面有 2 张图像。

如何使 100% 宽度容器内的图像具有相同的高度？

所有图像都没有一致的宽度和高度。我需要图像来保持其裁剪和纵横比。它们不需要具有相同的宽度。

这是到目前为止我使用 flex-box 所取得的成果。但他们的高度并不相等。我不介意使用 JavaScript 来解决这个问题。

我不想为容器或图像设置高度值。有没有办法让图像在具有相同高度的同时均匀分布？

.wrapper {
  width:100vw; /*should be width of browser*/
  display:flex;
  margin:0;
  padding:0;
  margin:0;
  border:1px solid;
}

.image {
  list-style:none;
  margin: 50px 1.5%;
}
.image:first-child {
  margin-left:0;
}
.image:last-child {
  margin-right:0;
}
img {
  width:100%
}

Run Code Online (Sandbox Code Playgroud)

<ul class="wrapper three_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
  <li class="image"><img src="http://lorempixel.com/550/700/"></li>
</ul>



<ul class="wrapper two_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
</ul>

Run Code Online (Sandbox Code Playgroud)

html javascript css flexbox

wsg*_*sgg

2021 11-25

5
推荐指数

1
解决办法

1682
查看次数

适合 THREE.js 中平面上的比例映射纹理

我正在尝试在单个平面上“按比例调整”映射的图像纹理。有点模拟的行为object-fit:cover。

因此图像贴图必须按比例放大或缩小才能完全覆盖整个平面。

我尝试尝试纹理的重复和偏移，但没有成功。（在我的代码中注释掉了）

正如您在下面的代码片段中看到的那样，图像仍然可以拉伸以适应。任何帮助表示赞赏！

var renderer = new THREE.WebGLRenderer({ canvas : document.getElementById('canvas'), antialias:true});
    renderer.setClearColor(0x7b7b7b);
    //  use device aspect ratio //
    renderer.setPixelRatio(window.devicePixelRatio);
    // set size of canvas within window 
    renderer.setSize(window.innerWidth, window.innerHeight);

    // SCENE
    var scene = new THREE.Scene();

    // CAMERA
    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.z = 5;




    // MESH 0

    // texture
  var texture_0 = new THREE.  TextureLoader().load("https://i.imgur.com/YO0ygMx.jpg");
  texture_0.wrapS = THREE.ClampToEdgeWrapping;
  texture_0.wrapT = THREE.RepeatWrapping;
    // var tileWidth = 2;
    // var …

Run Code Online (Sandbox Code Playgroud)

javascript three.js

wsg*_*sgg

2020 09-28

1
推荐指数

1
解决办法

1986
查看次数