首先 - 这就是它目前正在为我做的事情：

调整图像大小并裁剪/拼接图像以完全填充div 这是％高度和％宽度 - 它随时随地都这样做无论窗口调整大小
随着窗口调整大小，它会保持无缝工作
图像填充了div覆盖的区域 - 从左到右从上到下。
图像没有被压扁或拉伸 - 只是被裁剪或者正在溢出。
图像保持尽可能小，所以无论调整大小 - 你仍然可以看到正面或顶部和底部图像。
IE9，Fire Fox，Oprea，Chrome和Safari似乎没问题超过XP和7

所有这些对我来说都非常重要，请不要告诉我，我只需要：

<img style="width : 100%;">

这远不止于此。这不是太容易解释，但检查演示并拖动窗口的角落，这将是值得1000字......！

现在，我想补充一下：

一切都是，我希望信箱能够以图像为中心。

当div是一幅非常高的肖像或非常平坦的风景时，我只是在图像的顶部或左侧。

我希望原始图像的中心位于已调整大小的div的中心。

我尝试了一些事情，但却画了一个空白。我确定脚本可以输入一个减去顶部：或者左边：进入样式但是看起来如果我在div中得到太多的div，IE不喜欢它，或者我做错了什么？

事情是我真的不知道如何怀疑这些东西，我只是偷了一下，然后把它们拼在一起......

最后the demo

和脚本：

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


<style>

#imgarea {
position:absolute;
right:0px;
height:75%;
width:70%;
top:25%;
}

</style>


<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 area_width    = window_width * 0.7
    var area_height   = window_height * 0.75
    var height_ratio  = image_height / area_height
    var width_ratio   = image_width / area_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()">
    <div id="imgarea">  
<img onload="resizeImage()" src="f/a.jpg">  
    </div>
</body>
</html>

非常感谢。

Answer 1

我不确定这是否能正常工作，但可能会让你开始。我有一个客户端请求，径向渐变固定在网站的主要部分的左侧和右侧。页面设置了动态宽度，我有一段时间让一个可靠的图像工作，所以我想出了一个快速的CSS解决方案。

#bgHold #gradLeft{
    width:248px;
    height:975px;
    position:fixed;
    right:50%;
    margin-right:399px;
    background:url("../images/gradLeft.png") top center no-repeat;
}

margin-right是内容块宽度的一半。所以基本上，渐变在页面上固定在右边的50％，然后向左推50％的内容框使其与内容的边缘对齐。同样的想法适用于另一方。

现在，根据您的情况，您可以设置right:50%;和margin-right: imgWidth / 2吗？

Answer 2

我不确定这是不是你要找的东西，但让我们试试这个： * upd：此刻wysiwyg目前还没有评论，所以很抱歉杂乱的代码片段。

1.相对于div＃imgarea。然后你可以将它浮动到右边，复制你的权利：0px声明。不要忘记隐藏溢出，以确保图像的“信箱”部分保持隐藏。

#imgarea {
    position: relative;
    width: 70%;
    height: 75%;
    float: right;
    overflow: hidden; 
     top: 25%;
};

某些用户代理会向body元素添加填充和边距，从而阻止图像容器一直向右滑动。重置这些，以消除容器和浏览器窗口边缘之间的空白。

body { 保证金：0; 填充：0; }
至于图像本身，绝对定位。

img { 位置：绝对; }
最后是javascript。要使图像居中，您需要计算此宽度/高度=自动求和的值，然后分别重置左/顶属性。您的if函数需要稍微调整一下;保留变量：

if (height_ratio > width_ratio) {
    var newWidth, newHeight, newTop;
    newWidth = area_width;
    newHeight = image_height/width_ratio;
    newTop = -(newHeight-area_height)/2;
    document.images[0].style.width  = newWidth;
    document.images[0].style.height = newHeight;
    document.images[0].style.top = newTop;
    document.images[0].style.left = 0;
}else{
    var newWidth, newHeight, newLeft;
    newHeight = area_height;
    newWidth = image_width/height_ratio;
    newLeft = -(width-area_width)/2;
    document.images[0].style.width  = newWidth;
    document.images[0].style.height = newHeight;
    document.images[0].style.top = 0;
    document.images[0].style.left = newLeft;
}

我希望如果这不能完全解决问题，它至少会向您发送正确的方向。祝你好运。

如何让我的脚本中心img in div

首先 - 这就是它目前正在为我做的事情：

现在，我想补充一下：

最后the demo

和脚本：

2 个答案: