Question

我的代码设置是在悬停时将图像叠加在图像上，但是如果图像太大，我会使用一个函数来缩小图像并按比例缩小其他所有内容，但是叠加图像是一路向左移动我怎么能缩放它而不是它移动？我的css代码和javascipt只是改变了宽度和高度

#exif_data{
    position:absolute;
    z-index:2;
    color:white;
    background-color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    opacity:0.6;
    filter:alpha(opacity=60);
}
#image{
    border: none;
    z-index:1;
}
#content{
    position:relative; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 5.7%;
    text-align: center;
}

Answer 1

我的建议是尝试通过设置top和left的css属性来显式放置exif_data div。例如，给定这个DOM：

<div id="content">
  <img id="image" src="image.jpg" height="500" width="500" />
  <div class="exif_data">some data</div>
</div>

这个css：

#exif_data { position: absolute; }

您可以将“某些数据”blob放在图像的顶部，并在您希望使用javascript的位置：

var exif = document.getElementById('exif_data');

// you could center this easily with a little math, or set it explicitly:
exif.style.top = '100px';
exif.style.left = '100px';

Answer 2

我必须将整个css javascript退出，以便再次排队

Javascript并在div上覆盖图像

2 个答案: