中心图像CRUD画廊与自举

Question

嗨，所以我正在一个图像库的网站上工作，我决定使用一个Codeigniter和图像库CRUD的一些后端的东西，和Twitter Bootstrap的前端。它非常基本的东西。问题是Image CRUD为前端生成了很多自己的代码，所以我很难让它看起来像我想要的样子。我试图制作一个响应式图库，调整大小并保持集中在一堆不同的设备上。这应该是bootstrap的小菜一碟，但由于某种原因，它不起作用。任何帮助将不胜感激！

下面有用于图像中的代码图像CRUD输出：

<ul class='photos-crud'> 
      <li id="photos_206"> 
      <div class='photo-box'> 
       <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb__b551b-6.jpg' width='290' height='260' class="img-responsive basic-image" /></a> 
                      <div class="clear"></div> 
      </div> 
     </li> 
      <li id="photos_203"> 
      <div class='photo-box'> 
       <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a> 
                      <div class="clear"></div> 
      </div> 
     </li> 
      <li id="photos_204"> 
      <div class='photo-box'> 
       <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a> 
                      <div class="clear"></div> 
      </div> 
     </li> 
      <li id="photos_205"> 
      <div class='photo-box'> 
       <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a> 
                      <div class="clear"></div> 
      </div> 
     </li> 
      <li id="photos_202"> 
      <div class='photo-box'> 
       <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a> 
                      <div class="clear"></div> 
      </div> 
     </li> 
      <li id="photos_201"> 
      <div class='photo-box'> 
       <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a> 
                      <div class="clear"></div> 
      </div> 
     </li> 
     </ul> 

Answer 1

问题可能与具有精确尺寸的图像的宽度/高度。如果你能摆脱这一点，让bootstrap接管，那会很棒。响应式图片通常是父宽度的100％，而父母具有其他东西的百分比。也许你可以使用SASS来引导风格@extend到生成的元素，因此..

.photos-crud { @extend .row } 
.photos-crud > li { @extend .col-md-3} 

喜欢的东西，将设置用于布置图像的网格，然后如果你可以删除自动生成的尺寸，巨大的，但如果不是可能使用！重要的是覆盖尺寸，如..

.photos-crud > li img {width:100% !important; height:auto !important;}