javascript - 在浏览器中调整图像大小

Question

我想用浏览器重新抓取图像。我试过:

<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>

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

我在母版页的 ContentPlaceholder 中使用 C# 使用 ASP.NET。 imageUrl 填充在代码隐藏中。因此，如果没有肮脏的技巧，背景图像是不可能的。

我希望达到的是横向图片填充 100% 视口(viewport)宽度和最大视口(viewport)高度，而纵向图片填充 100% 视口(viewport)高度和最大视口(viewport)宽度。

Answer 1

你需要这样的东西:

<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>