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％似乎在我的情况下无法正常工作

我在我的母版页的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;（然后它应该相应地调整大小）。

图像在浏览器中调整大小

2 个答案:

HTML

CSS

否则，