在浏览器中调整图像大小
在浏览器中调整图像大小
提问于 2014-01-24 23:13:59
我想用浏览器重新定位图像。我试过了：
<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中使用ASP.NET和C#。imageUrl是以代码隐藏方式填充的。因此，没有肮脏的技巧，背景图像是不可能的。
我希望达到的是，风景图片填充100%视口宽度和最大视口高度，但肖像图像填充100%视口高度和最大视口宽度。
回答 2
Stack Overflow用户
发布于 2014-01-24 23:18:47
你需要这样的东西：
<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>Stack Overflow用户
发布于 2014-01-24 23:21:23
对于大小调整，我建议使用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，这是因为bottom和right上有额外的30px填充。因此出现了滚动条。
这里的解决方案是在具有滚动条的元素上创建一个overflow: hidden; (然后应该相应地调整大小)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21336076
复制相关文章
相似问题
腾讯云开发者
