在圖像幻燈片放映之外添加邊框

我正在爲CMS放置放映幻燈片，此幻燈片對圖像尺寸範圍具有一定的容差。不幸的是，我無法將所有圖像包裹在邊框中。在圖像幻燈片放映之外添加邊框

查看圖片以更好地理解問題。

2016-02-28 Alexander McNulty

[如何提問]（http://stackoverflow.com/help/how-to-ask） – Pedram

歡迎SO。當詢問有關由您的代碼引起的問題的問題時，如果您提供可用於重現問題的代碼，您將得到更好的答案。該代碼應該是[最小，完整和可驗證]（http://stackoverflow.com/help/mcve）。 – Aziz

我們需要看你的代碼。 [snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）或[bin]（http://jsbin.com/）將做最好的。 –

請檢查這一點，希望這會爲你工作。

.slider_container { 
 
    position: relative; 
 
} 
 
.slider_container img { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.slider_container .border_box { 
 
    position: absolute; 
 
    border: 3px solid #fff; 
 
    left: 5px; 
 
    right: 5px; 
 
    top: 5px; 
 
    bottom: 10px; 
 
}

<div class="slider_container"> 
 

 
    <img src="http://www.electricprism.com/aeron/slideshow/images/1.jpg" alt=""> 
 
    <div class="border_box"></div> 
 

 
</div>

來源

2016-02-28 10:43:07 xaid

看起來你正在使用bxSlider。如果是，請將以下規則集添加到外部文件.css或<style>元素的網頁中（如下面的代碼片段所示），或者您可以編輯樣式（不知道CMS的詳細信息，平臺，代碼等）：

相關CSS

.bx-wrapper { max-width: 98vw; } 
img { max-width: 97vw; height: auto; margin: 0 auto; }

.bx-wrapper是你猜對了，bxSlider的包裝，是最外部元素。這個規則說：「bxSlider永遠不會超過屏幕寬度的98％」
下一個規則集說：「所有<img> s永遠不會超過屏幕寬度的97％。全部<img> s高度將根據它們的寬度確定，所以它們不應該被擠壓或拉伸，所有<img> s在頂部或底部沒有邊距，但它們在左側和右側，這些邊距將自行調整，直到它們長度相等結果每個<img>都水平居中。「

片段

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>bx</title> 
 
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css"> 
 
<style> 
 
.bx-wrapper { max-width: 98vw; } 
 
img { max-width: 97vw; height: auto; margin: 0 auto; } 
 
</style> 
 
</head> 
 

 
<body> 
 
<ul id="bx"> 
 
\t <li><img src="http://loremflickr.com/945/600?random=1" /></li> 
 
    <li><img src="http://loremflickr.com/720/405?random=2" /></li> 
 
    <li><img src="http://loremflickr.com/666/375?random=3" /></li> 
 
    <li><img src="http://loremflickr.com/800/600?random=4" /></li> 
 
    <li><img src="http://loremflickr.com/1066/600?random=5" /></li> 
 
</ul> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script> 
 
<script> 
 
$(function() { 
 
\t var bx = $('#bx').bxSlider(); 
 
}); 
 
</script> 
 
</body> 
 
</html>

來源

2016-02-28 11:44:04 zer00ne

在圖像幻燈片放映之外添加邊框

回答

相關問題