代码之家  ›  专栏  ›  技术社区  ›  Poiple Shadow

图像库缩略图(无线组输入)在Firefox中变得更大

gallery firefox image css html
  •  0
  • Poiple Shadow  · 技术社区  · 12 年前

    我有一小段代码可以显示图像的缩略图,当你单击它们时,它们会显示每个图像的更大版本。它在Google Chrome中运行得很好,但在Firefox中,缩略图变得更大,因此不再适合一行(我使用百分比),我确信这一定是一个简单的修复,但遗憾的是,我不知道它是什么。

    以下是我网站上的预览:

    http://www.poipleshadow.com/Children-Charity-Blog-2014-02-February#CarnivalForTheChildren

    我使用风格的无线电输入,对于那些不知道的人来说,输入之间不能有空格,否则出于某种原因会增加额外的边距!花了一段时间才弄清楚!!

    无论如何,每个缩略图的宽度为11.11%,是9个缩略图的99.99%。

    我已经添加了完整的代码,但真正的问题是只有无线电盒。

    CSS格式 

    /* ********************** NEW GALLERY CODE ************************/ 
/* IMPORTANT - IN THE CODE THERE CAN'T BE 
   SPACE BETWEEN EACH INPUT (Eg New Lines)  
   AS IT MESSES WITH FORMAT OF THE DISPLAY */
.radiogallery {position:relative;  width:100%; height:auto; padding:0; border:0; margin:0; overflow:hidden; background:none; text-align:center;} /*Bounding Box */

/* Use this border as the border to the image, the border on the label is for spacing instead of using a margin */
.radiogallery img { max-width: 100%; height:auto;  padding:0; margin:0;   border: 2px solid #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }


/************************ Thumbnails ************************/
/* Use the Border to add spacing between the images */
.radiogallery label {display:inline-block; overflow:hidden; line-height:0; opacity:1; height:auto;  margin:0; padding:0; margin-bottom:-4px; border: 2px solid #eee; cursor:pointer; background:none; box-sizing:border-box; } /* Thumbnails */


.radiogallery label.nine  { width:11.11%; } /* Thumbnails (9 ACROSS)*/


.radiogallery input {display:none;   } /* Check Box Selection Status (NOT SHOWN) */
.radiogallery input:checked + label img{opacity:1; border: 1px solid #09F;     }
.radiogallery input.pics + label img:hover  {opacity:1; border: 1px solid #09F;   }
.radiogallery input:checked + label:hover {opacity:1; }

/************************ MAIN IMAGE (Hiding) ************************/
.radiogallery div.large {position:absolute;display:inline-block; left:0; top:730px; width:100%; height:auto; margin:auto;  border:0; background:none; padding:0px; text-align:center; opacity:0; z-index:100; overflow:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s; }
/* Make Float:none so that image is centered */
.radiogallery div.large img { margin:auto; background:none; width:720px; width:auto; margin:0;
margin-top:10px; padding:2px; background:white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbe3ff; float:none;}


/**************************************************** MAIN IMAGE (Showing) ****************************************************/
.radiogallery input#pic1:checked ~ div.pic1,
.radiogallery input#pic2:checked ~ div.pic2,
.radiogallery input#pic3:checked ~ div.pic3,
.radiogallery input#pic4:checked ~ div.pic4,
.radiogallery input#pic5:checked ~ div.pic5,
.radiogallery input#pic6:checked ~ div.pic6,
.radiogallery input#pic7:checked ~ div.pic7,
.radiogallery input#pic8:checked ~ div.pic8,
.radiogallery input#pic9:checked ~ div.pic9,
.radiogallery input#pic10:checked ~ div.pic10, 
.radiogallery input#pic11:checked ~ div.pic11,
.radiogallery input#pic12:checked ~ div.pic12,
.radiogallery input#pic13:checked ~ div.pic13,
.radiogallery input#pic14:checked ~ div.pic14,
.radiogallery input#pic15:checked ~ div.pic15,
.radiogallery input#pic16:checked ~ div.pic16 {position:relative; opacity:1; z-index:100; top:10%; height:auto; margin:auto; padding:0;  background:none; }

    HTML格式 

    <div class="radiogallery">

<input type="radio" name="pic" id="pic1" class="pics" checked="checked"><label for="pic1" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></label><input type="radio" name="pic" id="pic2" class="pics"><label for="pic2" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></label><input type="radio" name="pic" id="pic3" class="pics"><label for="pic3" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></label><input type="radio" name="pic" id="pic4" class="pics"><label for="pic4" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4"  width="960" height="720"></label><input type="radio" name="pic" id="pic5" class="pics"><label for="pic5" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></label><input type="radio" name="pic" id="pic6" class="pics"><label for="pic6" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></label><input type="radio" name="pic" id="pic7" class="pics"><label for="pic7" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></label><input type="radio" name="pic" id="pic8" class="pics"><label for="pic8" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label><input type="radio" name="pic" id="pic9" class="pics"><label for="pic9" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label>


 <div class="pic1 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></div>
 <div class="pic2 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></div>
 <div class="pic3 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></div> 
 <div class="pic4 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4" width="960" height="720"></div> 
 <div class="pic5 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></div> 
 <div class="pic6 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></div> 
 <div class="pic7 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></div> 
 <div class="pic8 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div> 
 <div class="pic9 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div> 
</div> <!-- end radiogroup -->
    2 回复  |  直到 11 年前
        1
  •  1
  •   Nico O    12 年前

    你在CSS中做了奇怪的事情。你把元素放在一起 inline-block 还可以创建此项的子元素 float:left; 毫无理由。

    您应该删除图像的浮动(虽然这不是您当前的问题)问题是框大小,请将其更改为边框框,以计算项目宽度的边框。

    将此添加到CSS 

    .radiogallery, 
.radiogallery * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
        2
  •  1
  •   dtyler    12 年前

    将Mozilla的厂商前缀版本的框大小添加到标签中 

    .radiogallery label { -moz-box-sizing: border-box; }

    每 http://caniuse.com/#feat=css3-boxsizing ,看起来Firefox距离取消前缀的要求还有2个版本。

    正如其他人所提到的,在较小的缩略图区域中嵌入大型图像通常是不好的做法。您应该使用一些图像编辑软件制作一个较小的缩略图大小的版本,并将其用于缩略图,同时链接到完整视图的大版本。

    编辑 : 使用缩略图有两个原因:渲染和下载大小/速度。渲染是一个问题,因为某些浏览器,特别是移动浏览器,很难动态调整大图像的大小。

    关于您的评论,是的,如果您没有进行其他更改,使用更多图像将增加数据负载。然而,现在,由于该页面正在加载9幅大型图像,我需要大约8秒才能加载(5次试用,缓存被禁用),而且我在桌面计算机上有快速的互联网连接。在连接速度慢得多的移动设备上,观众可能会放弃页面加载。

    另一种选择是将这些图像的加载推迟到页面加载之后,或者甚至推迟到用户单击缩略图之前。由于这些图像占页面的约50%,您可以预期页面负载会显著提高。

    推荐文章
    Marcin Budzy  ·  Twenty 24 Wordpess主题的子菜单隐藏在图库下方(响应式灯箱和图库)(Wordpress)
    1 年前
    Patti Love  ·  PowerApps重复库中的筛选SQL表
    2 年前
    Oktawian  ·  Android Studio-从库导入图像
    8 年前
    Jinsoo Kang  ·  图像库中的内联块不工作
    8 年前
    Josh Rodgers  ·  Google Grid Gallery Safari模式滚动
    8 年前
    Lucas Skarpness  ·  我如何制作一个自动匹配拼图之类照片的图库?
    8 年前
    Vivek Patel  ·  如何有效地列出一个目录(包括子目录)中的所有文件?
    8 年前
    Jane Lo  ·  获取购物车对象中的可变产品附件库id
    8 年前
    Aleix Gallet Segarra  ·  在javascript中打印图像数组的问题
    8 年前
    Mr 537h  ·  图库页面100%宽度
    8 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号