中心圖像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;}