我想要一个显示单个PNG或JPEG图像的HTML页面.我希望图像占据整个屏幕,但是当我这样做时:
<img src="whatever.jpeg" width="100%" height="100%" />
它只会拉伸图像并混淆纵横比.如何解决此问题,以便在缩放到可能的最大尺寸时图像具有正确的宽高比？
Wayne发布的解决方案几乎可以工作,除了你有一个高大的图像和一个宽窗口的情况.这段代码是对他的代码的略微修改,它做了我想要的:
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
Way*_*yne 14
这是一个快速功能,可以将高度或宽度调整为100%,具体取决于哪个更大.在FF3,IE7和Chrome中测试过
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width > myImage.height){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
你不一定要根据哪个更大的方向伸展.例如,我有一个宽屏显示器,所以即使它是一个比它更高的图像,从左到右拉伸它仍然可以剪掉顶部和底部边缘.
您需要计算窗口宽度和高度与图像宽度和高度之间的比率.较小的一个是你的控制轴 - 另一个是依赖的.即使两个轴都大于相应的窗口长度,也是如此.
<script type="text/javascript">
// <![CDATA[
function resizeToMax (id) {
var img = document.getElementById(id);
myImage = new Image();
myImage.src = img.src;
if (window.innerWidth / myImage.width < window.innerHeight / myImage.height) {
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
// ]]>
</script>
小智 5
也可以使用纯CSS使用背景图像和background-size:contain属性来执行此操作:
<head>
<style>
#bigPicture
{
width:100%;
height:100%;
background:url(http://upload.wikimedia.org/wikipedia/commons/4/44/CatLolCatExample.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
</style>
</head>
<body style="margin:0px">
<div id="bigPicture">
</div>
</body>
如果容器更改宽高比,则可以自动更新,而无需响应调整大小事件(此处编码的Javascript方法可能会导致在用户调整浏览器大小时切断图像).该<embed>方法具有相同的好处,但CSS更平滑,并且没有安全警告问题.
注意事项:
<img>元素表示没有上下文菜单,也没有替代文本.background-size:contain仅为9+,我甚至无法在IE9中使用它(原因不明).background-*属性有相同的CSS块作为背景图像进行指定,因此在同一页上多个图像将每个人都需要自己的contain,no-repeat和center.| 归档时间： |
|
| 查看次数： |
33972 次 |
| 最近记录： |