通过屏幕旋转更改图像宽度和高度

Vit 发表于 Dev

年

请告诉我如何使用 javascript 更改方向更改图像宽度和高度。不幸的是，我的代码不起作用，这里是：

<script>window.addEventListener("orientationchange", function screenrotation() {
      var firstresposniverowphoto = document.getElementById("#firstresposniverowphoto");
      var secondresposniverowphoto = document.getElementById("#secondresposniverowphoto");
      if(screen.orientation=="portrait"){
          firstresposniverowphoto.width = '100%';
          secondresposniverowphoto.width = '100%';
      }if(screen.orientation=="landscape"){
          firstresposniverowphoto.width = '40vw';
          secondresposniverowphoto.width = '40vw';
      }                  
}, false);
</script>

年

谢谢大家的答案！我知道我做了一件非常愚蠢的事情，要求 JavaScript 解决我之前描述的问题。相反，我意识到最好使用 CSS 而不是 JavaScript。这是我的解决方案：

@media screen and (orientation: landscape) {

.contentOne{
box-shadow: 0 1vw 3vw 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-repeat: no-repeat;
background-size: cover; 
height:40vh;
width:40vw;
}
.contentOne:hover{
box-shadow: 0 2vw 4vw 0 rgba(0,0,0,0.4);
}
}

@media screen and (orientation: portrait) {

.contentOne{
box-shadow: 0 1vw 3vw 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-repeat: no-repeat;
background-size: cover; 
width:100%;
height:40vh;
margin:auto;
}
.contentOne:hover{
box-shadow: 0 2vw 4vw 0 rgba(0,0,0,0.4);
}
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。