Javascript 在浏览器中调整图像大小

我想用浏览器重新调整图像大小。我试过：

<div id="imageWrapper">
  <img src="imageurl" />
</div>

<style> 
    #imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
    #imageWrapper img{width:100%;height:100%;}
</style>

#imageWrapper{宽度：100%；高度：100%；填充：0 0 30px 30px}
#imageWrapper img{宽度：100%；高度：100%；}

这适用于横向图片，但纵向格式的图像缩放到图像宽度，而不是浏览器高度。相反，我得到了一个不需要的滚动条和一个需要滚动的图像。身高：在我的情况下，100%似乎不能正常工作

我在ASP.NET中使用C#在母版页的内容占位符中工作。imageUrl由代码填充。因此，如果没有肮脏的把戏，背景图像是不可能的

---

我希望达到的是，风景图片填充100%的视口宽度和最大视口高度，而肖像图片填充100%的视口高度和最大视口宽度

您需要这样的东西：

<style>
  body {
    padding: 0;
    margin: 0;
  }
  #imageWrapper{
     width:100%;
     height:100%;
     padding:0
  }
  #imageWrapper img{
     width:auto;
     height:100%;
  }
</style>

<div id="imageWrapper">
  <img src="http://fc07.deviantart.net/fs12/i/2006/310/d/f/Value_Gray_Scale_Self_Portrait_by_stronglikemusic.jpg" />
</div>

身体{
填充：0；
保证金：0；
}
#图像包装器{
宽度：100%；
身高：100%；
填充：0
}
#图像包装器{
宽度：自动；
身高：100%；
}

对于大小，我建议使用

背景大小

封面

或

包含以下属性：

HTML
否则,，
您的问题在于
填充
，因为这会增加
宽度：100%

换句话说：如果父对象是
100x100px
，则
#imageWrapper
的总大小将变为
130x130px
，因为
底部和
右侧有额外的
30px
填充。因此，滚动条

这里的解决方案是
溢出：隐藏（然后应相应调整大小）。
添加文本对齐：居中；为了使您的肖像图像集中在页面上，我使用ASP:NET en，我使用C#在代码中填充imageUrl，因此背景图像是不可能的。
<div id="imageWrapper">
  <div class="image" style="background-image: url(imageurl);" />
</div>

    #imageWrapper{
        width:100%;
        height:100%;
        padding:0 0 30px 30px
     }
    #imageWrapper .image{
         width:100%; 
         height:100%;
         background-size: cover; /* or contain */
         background-repeat: no-repeat;
         background-position: center;
    }