如何添加邊界到廣場大圖像？

嗨，我想添加一個邊界到環球免稅店的大圖像。我該如何給那個？如何添加邊界到廣場大圖像？

我給這樣的

div.galleria-image img{ border: 5px solid #ccc; }

但它削減右側或底部邊框，也顯示出上邊框的thumbail圖像。

這是我的css文件。

.galleria-container{position:relative;overflow:hidden; height:570px; margin-bottom:30px; } 
.galleria-thumbnails-container { } 
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;} 
.galleria-stage{position:absolute;top:10px;bottom:80px;left:0px;right:10px;overflow:hidden;} 
div.galleria-stage img { border: 1px solid red; } 
.galleria-thumbnails-container{height:65px;bottom:0;position:absolute;left:0px;right:10px;z-index:2;} 
.galleria-carousel .galleria-thumbnails-list{margin-left:30px;margin-right:30px;} 
.galleria-thumbnails .galleria-image{height:50px;width:60px;background:#fff;margin:0 13px 0 0; float:left;cursor:pointer;} 
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2; } 
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(images/classic-loader.gif) no-repeat 2px 2px; } 
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;} 
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;} 
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;} 
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb; } 
.galleria-info-title+.galleria-info-description{margin-top:7px;} 
.galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;} 
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;} 
.galleria-info-link:hover, 
.galleria-info-close:hover{opacity:.5; } 
.galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0; } 
.galleria-image-nav-left, 
.galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;} 
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;} 
.galleria-image-nav-left:hover, 
.galleria-image-nav-right:hover{opacity:1.0;} 
.galleria-thumb-nav-left, 
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 11px;position:absolute;left:0;top:0;height:60px;width:23px;z-index:3;opacity:1.0;} 
.galleria-thumb-nav-right{background-position:-578px 11px;border-right:none;right:0;left:auto;} 
.galleria-thumbnails-container .disabled, 
.galleria-thumbnails-container .disabled:hover{opacity:.6;cursor:default; } 
.galleria-thumb-nav-left:hover, 
.galleria-thumb-nav-right:hover{opacity:1;/*background-color:#111;*/} 
.galleria-carousel .galleria-thumb-nav-left, 
.galleria-carousel .galleria-thumb-nav-right{display:block; } 
.galleria-thumb-nav-left, 
.galleria-thumb-nav-right, 
.galleria-info-link, 
.galleria-info-close, 
.galleria-image-nav-left, 
.galleria-image-nav-right{background-image:url(images/classic-map.png);background-repeat:no-repeat;} 
div.galleria-image img{ border: 5px solid #ccc; }

任何身體知道該解決方案，請幫助我。

來源

2010-11-02 learner

當您調用環球免稅店（）時，將image_margin選項設置爲2（注意：當我嘗試1時，底部邊距被切碎）。這是我用：

$('#gallery').galleria({ 
    autoplay: 5000, 
    data_source: slides, 
    pause_on_interaction: false, 
    transition: 'fade', 
    image_margin: 2 
});

我的網站的CSS文件中有如下定義1px的灰色邊框添加到大圖片：

.galleria級IMG { 邊界：1px的固體#CCCCCC; }

來源

2010-11-09 08:00:21 david

嘗試增加border: 1px solid red;到div.galleria-image img

div.galleria圖像IMG {邊界：1px的純紅色; }

編輯：看起來像上面的CSS會導致縮略圖也有邊界。

試試這個：

div.galleria級IMG {邊界：1px的固體紅; }

來源

2010-11-02 12:23:29 SteD

嗨，先生它的工作，但其右側切割？ – learner 2010-11-02 12:30:38

你好先生如果給它那樣創建一個頂部邊框上的圓頂場所縮略圖設計。 – learner 2010-11-02 12:50:08

答覆已更新。 – SteD 2010-11-02 13:02:07

你需要顯示父div的我有這個問題的溢出和我加入和它的工作很大 .galleria-container { overflow: visible !important; } .galleria-image, .galleria-stage { overflow: visible !important; } .galleria-stage .galleria-images .galleria-image img { border: 1px solid #333333; }

來源

2010-12-01 18:18:35

這樣看來，在imageMargin選項需要設置到兩次它應該是什麼。

http://galleria.io/docs/options/imageMargin/

就像我一直在試圖把一個6像素邊框周圍，底部不斷得到切斷，直到我設置imageMargin至12

來源

2012-04-26 11:27:45 Cat

這是如何改進已被接受的答案？ – 2012-10-27 22:34:52

如果你的邊界，例如4 PX那麼你應該設置image_margin變量爲8，如果邊框是8px，那麼將其設置爲16（雙面，因爲你有兩面）。

$('#gallery').galleria({ 
    image_margin: 8 
});

來源

2012-08-08 07:50:17 George

如何添加邊界到廣場大圖像？

回答

相關問題