CSS 圖片選項卡是一種經典的網頁布局形式，常用于展示多張圖片或圖片+文字的內容。本文將介紹一種基于CSS的圖片選項卡實現方法。

首先，我們需要一個基礎的HTML結構，包含一個Tab選項卡和多個選項卡內容區域，如下所示：

<div class="tab">
<button class="active" onclick="showTabContent(0)">選項卡1</button>
<button onclick="showTabContent(1)">選項卡2</button>
<button onclick="showTabContent(2)">選項卡3</button>
<button onclick="showTabContent(3)">選項卡4</button>
<div class="tab-content active">
<img src="image1.jpg">
</div>
<div class="tab-content">
<img src="image2.jpg">
</div>
<div class="tab-content">
<img src="image3.jpg">
</div>
<div class="tab-content">
<img src="image4.jpg">
</div>
</div>

其中，button表示選項卡，tab-content表示選項卡內容區域。我們在button中添加一個"active"類，表示當前激活的選項卡。選項卡內容區域默認隱藏，active類用于顯示當前選項卡的內容。

接下來，我們需要編寫用于切換選項卡的JavaScript函數，如下所示：

function showTabContent(index) {
// 獲取所有選項卡和選項卡內容
var tabs = document.querySelectorAll('.tab button');
var contents = document.querySelectorAll('.tab-content');
// 遍歷所有選項卡和選項卡內容，將當前選項卡和對應內容設置為active，其余設置為非active
for (var i = 0; i < tabs.length; i++) {
if (i === index) {
tabs[i].classList.add('active');
contents[i].classList.add('active');
} else {
tabs[i].classList.remove('active');
contents[i].classList.remove('active');
}
}
}

最后，我們需要添加一些CSS樣式，定義Tab選項卡的樣式和選項卡內容區域的樣式。如下所示：

/* 定義Tab選項卡的樣式 */
.tab {
border-top: 3px solid #ccc;
margin-bottom: 20px;
}
.tab img {
max-width: 100%;
height: auto;
}
.tab button {
background-color: #ddd;
color: #555;
display: inline-block;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.tab button.active {
background-color: #ccc;
}
.tab-content {
display: none;
height: 300px;
overflow: hidden;
margin-top: 20px;
transition: height 0.3s ease;
}
.tab-content.active {
display: block;
height: auto;
margin-top: 0;
}

以上就是一種基于CSS的圖片選項卡實現方法，希望對大家有所幫助。