在浏览器中调整图像大小

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>

这对于横向图片而言效果很好，但是纵向格式的图像会缩放到图像宽度，而不是浏览器高度。 相反，我得到了一个不需要的滚动条和一个需要滚动的图像。 身高：100％在我的情况下似乎无法正常工作

我在MasterPage的ContentPlaceholder中使用C＃在ASP.NET中工作。 imageUrl在代码后面被填充。 因此，如果没有肮脏的技巧，就不可能有背景图像。

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

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>

Answer 2

对于大小调整，我宁愿建议使用background-size cover或contain属性：

HTML

<div id="imageWrapper">
  <div class="image" style="background-image: url(imageurl);" />
</div>

CSS

    #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;
    }

除此以外，

您的问题是padding ，因为这会增加width: 100%;

换句话说：如果父母是100x100px然后总规模#imageWrapper成为130x130px ，因为额外的30px的填充bottom和right 。 因此，滚动条。

这里的解决方案可能是overflow: hidden; 在具有滚动条的元素上（然后应相应调整大小）。