Question

经过几个小时的搜索后，我在http://generationsinc.co.uk/test/java.html找到并调整了一些JavaScript，它正是在窗口调整大小时完全按照我想要的方式操作图像。

<html>
<head>
<title>test</title>

<script type="text/javascript">

function resizeImage()
{
    var window_height = document.body.clientHeight
    var window_width  = document.body.clientWidth
    var image_width   = document.images[0].width
    var image_height  = document.images[0].height
    var height_ratio  = image_height / window_height
    var width_ratio   = image_width / window_width
    if (height_ratio > width_ratio)
    {
        document.images[0].style.width  = "100%"
        document.images[0].style.height = "auto"
    }
    else
    {
        document.images[0].style.width  = "auto"
        document.images[0].style.height = "100%"
    }
}
</script>

</head>

<body onresize="resizeImage()">

<img onload="resizeImage()" src="f/a.jpg">  

</body>
</html>

它可以（或类似的东西）在div中以相同的方式工作吗？即 - 保持图像尽可能小，同时完全填充div并保持图像的纵横比？（div本身将根据窗口大小的百分比调整高度和宽度。）

Answer 1

你真的不需要JavaScript来做这件事，你可以使用纯CSS。创建一个百分比宽度的div元素。然后将图像放在内部，将CSS中的宽度设置为100％，例如。

Example in this jsFiddle （尝试拖动JavaScript /结果边框的边缘）

javascript图像调整大小并裁剪以完全填充div

1 个答案: