Question

在网站上，我使用5x 5网格显示图像。在最后一张图片，自定义零件，我希望显示一个旋转图像。这个panelGallery js脚本在15英寸屏幕以外的所有屏幕尺寸上工作正常，在测试时，整个15英寸屏幕被放大版本的小旋转图像占据，覆盖所有背后的图像。任何帮助解决这个纠缠不清的问题都会受到欢迎。

<head>
<script type="text/javascript"     
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
$('#container').panelGallery();
});
</script>
<script>
if( self == top ) {
    document.documentElement.style.display = 'block' ; 
 } else {
    top.location = self.location ; 
 }
 </script>


</head>


<div  class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:130px; height:104px;"><a href="http://www.hpcgears.com/n/products/16.custom_products/custom_parts.php" onclick="return true">

        <div id="container">

            <img alt="" src="1.images/images_special/plastic1.jpg" name="tb" width="130" height="104"/>

            <img alt="" src="1.images/images_special/gear.jpg" name="tb" width="130" height="104"/>
            <img alt="" src="1.images/images_special/gear2.jpg" name="tb" width="130" height="104"/>
            <img alt="" src="1.images/images_special/custom1.gif" name="tb" width="130" height="104" />
            <img alt="" src="1.images/images_special/double_gears.jpg" name="tb" width="130" height="104"/>
            <img alt="" src="1.images/images_special/gearbox.jpg" name="tb" width="130" height="104"/>
            <img alt="" src="1.images/images_special/gearbox3.jpg" name="tb" width="130" height="104"/>
            <img alt="" src="1.images/images_special/custom2.gif" name="tb" width="130" height="104" />
            <img alt="" src="1.images/images_special/gearbox2.jpg" name="tb" width="130" height="104"/>
            <img alt="" src="1.images/images_special/gear3.jpg" name="tb" width="130" height="104"/></div>
<span class="PZ3inr"> <em><span style="color:#ccf; background:inherit;">Custom parts</span></em></span></span></a>

自定义零件

Answer 1

一个实例可以帮助提供一个更好的例子。然而，这是我的修复 - 不知道所有的移动部件（css，你正在使用的js库等）。所以我建议制作一个CSS类并创建一个固定的最大宽度，以防止它显示15英寸宽的巨大。

尝试在容器上覆盖媒体

<div class="container">...</div>

CSS解决方案

@media screen and (max-width: 1800px)  {
    .container { width:1800; }  
}

或者您只需在该div上设置最大宽度

.container { max-width:1800px; }

现在代替1800px使用正确显示图像的任何屏幕宽度。

javascript，jquery不会在15英寸的屏幕上显示图像

1 个答案: