假設(shè)我們有一組圖片，要在網(wǎng)頁上按需顯示其中的一部分，可以使用HTML和CSS來實現(xiàn)。

<div class="wrapper">
<img class="image" src="image1.jpg">
<img class="image" src="image2.jpg">
<img class="image" src="image3.jpg">
</div>

我們首先將這些圖片放在一個div容器中，每個圖片使用相同的class標(biāo)識，這樣可以方便地進行樣式設(shè)置。

.wrapper {
display: flex;
}
.image {
width: 100px;
height: 100px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
}
.active {
width: 300px;
height: 200px;
object-fit: cover;
}

接下來設(shè)置CSS樣式，我們將容器設(shè)置為flex布局，每個圖片的寬度、高度和填充方式使用object-fit屬性進行設(shè)置。當(dāng)圖片被選中時，我們添加一個.active類來使其顯示更大。

<script>
var images = document.querySelectorAll('.image');
images.forEach(function(image) {
image.addEventListener('click', function() {
images.forEach(function(image) {
image.classList.remove('active');
})
this.classList.add('active');
})
})
</script>

最后使用JavaScript為每個圖片添加點擊事件監(jiān)聽器，當(dāng)圖片被點擊時，首先移除所有圖片的.active類，然后給當(dāng)前圖片添加.active類。