Javascript 如何在div中设置脚本中心img_Javascript_Css

Javascript 如何在div中设置脚本中心img

javascript css

Javascript 如何在div中设置脚本中心img,javascript,css,Javascript,Css,我在这里用我找到并拼凑的零碎东西编造了一个小脚本，但我需要一些帮助来添加一个额外的功能首先，这就是它目前为我所做的：它调整图像的大小并裁剪图像/信箱，以完全填充div 这是一个%高度和%宽度-它随时都会这样做任意调整窗口大小随着窗口大小的调整，它可以无缝地工作图像从左到右100%填充div覆盖的区域从上到下图像没有被挤压或拉伸，只是被裁剪或者正在泛滥图像尽可能小，因此无论大小如何- 你仍然可以看到它的两侧或顶部和底部形象 IE9、Fire Fox、Oprea、Chrome和

我在这里用我找到并拼凑的零碎东西编造了一个小脚本，但我需要一些帮助来添加一个额外的功能

首先，这就是它目前为我所做的：

它调整图像的大小并裁剪图像/信箱，以完全填充div 这是一个%高度和%宽度-它随时都会这样做任意调整窗口大小
随着窗口大小的调整，它可以无缝地工作
图像从左到右100%填充div覆盖的区域从上到下
图像没有被挤压或拉伸，只是被裁剪或者正在泛滥
图像尽可能小，因此无论大小如何- 你仍然可以看到它的两侧或顶部和底部形象
IE9、Fire Fox、Oprea、Chrome和Safari似乎都不错超过XP和7

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

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

非常感谢您的帮助。

我不确定这是否会奏效，但可能会让您开始。我有一个客户要求在网站主要内容部分的左右两侧固定一个径向梯度。这个页面是用动态宽度设置的，我花了很长时间才得到一个立体图像，所以我想出了一个快速的css解决方案

<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>

右边距是内容块宽度的一半。因此，基本上，梯度是固定在页面上，从右边的50%，然后向左推内容框的50%，使其与内容的边缘对齐。同样的想法也适用于另一方

现在，根据您的情况，也许您可以将

设置为正确：50%

和

右边距：

imgWidth/2？

我不确定这是否是您想要的，但让我们试试这个： *upd:wysiwyg目前不处理注释，所以很抱歉代码片段太乱

1.相对定位伊姆加里亚分部。然后您可以将其向右浮动，以复制您的right:0px声明。不要忘记隐藏溢出，以确保图像的“字母框”部分保持隐藏

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

一些用户代理会在主体元素中添加填充和边距，从而防止图像容器向右滑动。重置这些，以消除容器和浏览器窗口边缘之间的间隙

身体{ 保证金：0；填充：0； }

至于图像本身，请绝对定位它

img{ 位置：绝对位置； }

最后是javascript。要使图像居中，需要计算此“宽度/高度=自动”的总和，然后分别重置左/顶属性。你的if功能需要稍微调整一下；保持变量不变：

if（高/宽比）{
变量newWidth、newHeight、newTop；
newWidth=面积×宽度；
新高度=图像高度/宽度之比；
newTop=-（newHeight-area\u 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；
}否则{
变量newWidth、newHeight、newLeft；
新高度=面积高度；
newWidth=图像宽度/高度之比；
newLeft=-（宽度-面积×宽度）/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；
}

我希望，如果这不能完全解决问题，它至少会让你朝着正确的方向前进。祝你好运。

你真的应该学习这些东西，而不是偷东西……谢谢忍者，我知道，我知道。。。我所能说的就是我学得很快，希望这就是重点

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