Question

请告诉我如何使用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>

Answer 1

    function detectmob() {
if (navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/webOS/i)
        || navigator.userAgent.match(/iPhone/i)
        || navigator.userAgent.match(/iPad/i)
        || navigator.userAgent.match(/iPod/i)
        || navigator.userAgent.match(/BlackBerry/i)
        || navigator.userAgent.match(/Windows Phone/i)) {
    return true;
} else {
    return false;
}}if (detectmob()) {
    $(window).on("orientationchange", reloadIframe);
} else {
    $(window).on("resize", reloadIframe);
}

您可以使用上述内容。

Answer 2

您可以使用此 JQuery ，并且只有两个不同方向的两个单独图像（横向/纵向）。

$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();

if(width>height) {
  // Landscape
  $("#img").attr("src","landscapeurl");
} else {
  // Portrait
  $("#img").attr("src","portraiturl");
}
});

Answer 3

谢谢大家的回答！我知道我做了一件非常愚蠢的事情，要求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);
}
}

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

3 个答案: