小编Cyr*_*ill的帖子

我在几个浏览器中遇到缩小 IMG 的问题......图像需要缩小，因为它们响应浏览器大小......这是我的代码：

#pic-holder img {
    -moz-transform: rotate(0deg);
    /*image-rendering:-webkit-optimize-contrast;*/
    max-width: 70%;
    width:900px;
    height: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:1;

}

-moz-transform: 旋转 (0deg); 让图像在多个版本的 Firefox 中变得更清晰。Chrome 看起来很完美，没有问题……但是 Safari 7 看起来很糟糕……有人知道我能做什么吗？使用 JS 更改 Retina 显示的图像？它不必缩减这么多信息？我知道缩小不是一个非常聪明的解决方案，但是我还能做些什么来让响应式图像在改变浏览器的宽度和高度时被缩放？

谢谢你！

我有一个脚本,在悬停时显示div并将其粘贴到光标上.

$(".picture_holder_thumb").mouseover(function () {
    $(".title", this).show();
});

$(".picture_holder_thumb").mouseout(function () {
    $(".title", this).hide();
});
$(document).bind('mousemove', function (e) {
    $(".title", this).css({
        left: e.pageX,
        top: e.pageY
    });
});

它可以工作,但不知何故,粘性div和光标之间总是有很大的空间.

这是我的Div的CSS:

#img-container .captioning .title {
    width: auto;
    height:auto;
    position: absolute;
    float:left;
    z-index:1;
    display: none;
}

我的JS有问题吗？我感谢任何帮助!

在这里你可以看到它的问题:http://www.cyrill-kuhlmann.de/index.php/projects

这是我从JS获得JS的示例小提琴:http://jsfiddle.net/hj57k/

让我们说这是我的HTML:

<div class="picture_holder_thumb">
<div class="picture"> <a href="…"><img></a></div>
<div class="captioning"><div class="title" display: none; ">TITLE</div></div>
</div>

这将创建一个可视缩略图索引,如下所示:

www.cyrill-kuhlmann.de/index.php/projects

我有一个JS,根据游标位置显示每个缩略图的标题:

script type='text/javascript'>
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
 mouseX = e.pageX; 
 mouseY = e.pageY;
 });  
 $(".picture_holder_thumb").mouseover(function(){
 $(".title").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
 });

 $(".picture_holder_thumb").mouseout(function(){
 $(".title").fadeOut('slow');
 });
 </script>

这是CSS:

.captioning .title {
    position: relative;
    z-index:1;
    color: #FFF;
    display: none;

 }

它有效,但问题是它一次显示所有标题!我怎样才能实现它只显示这个".title",它"位于"我正在盘旋的.picture_holder_thumb？

那可能吗？不幸的是,由于CMS结构,我无法将类更改为ID.