純CSS方型圖片,RWD自適應父容器寬度

在現代網頁設計中,我們經常需要在不同裝置和螢幕大小下展示圖片。有時,我們希望圖片能夠以方型的形式呈現,並自動適應其父容器的寬度。在這篇文章中,我們將使用純 CSS 技術來實現這樣的效果。

HTML 結構

首先,讓我們來看一下 HTML 結構。我們將使用以下代碼:

在這個結構中,我們使用了一個包含 image-square 類別的容器,並在其中插入一個 <img> 元素。src 屬性設置為 Unsplash 提供的隨機圖片 URL,這樣我們可以獲得一個無版權的圖片來完整演示這個範例。

CSS 樣式

現在,我們來看一下 CSS 樣式,以實現方型圖片並使其自適應父容器的寬度。

在這個 CSS 樣式中,我們對 .image-square 類別設置了以下屬性:

對於 .image-square img 選擇器,我們設置了以下屬性:

完整示例

您可以在 CodePen 上查看完整的示例,並進行測試和修改。

See the Pen
Untitled
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

結論

透過使用純 CSS 技術,我們可以輕鬆地創建方型圖片容器並實現自適應父容器寬度的效果。這個技巧可以應用於各種網頁設計場景中,為使用者提供更好的視覺體驗。透過設置容器的寬度為父容器的百分比,並使用 padding-bottom 屬性創建一個方形容器,我們可以確保圖片在不同裝置和螢幕大小下都能自動調整大小,並保持比例。這種技術的優點是簡單且無需任何 JavaScript 庫或框架的依賴。希望這篇文章能幫助您理解如何使用純 CSS 創建自適應的方型圖片容器。

[……]

閱讀更多

Swiper with lightbox 輪播插件結合燈箱

Swiper 是一個功能豐富且流行的 JavaScript 輪播插件,廣泛應用於網站和行動應用程式的圖片輪播、幻燈片和滑塊展示。它提供了豐富的配置選項和自定義功能,非常容易擴充,不僅如此還有完整的Example,可讓開發者快速開始輕鬆創建出優雅且互動性強的輪播效果。

為何要加入燈箱功能

在很多使用場景下,只有輪播功能可能無法完全滿足需求,特別是當用戶想要更專注地放大圖片並細看細節時,我發現 Swiper 沒有預設這樣的功能,所以在這樣的情況下,將 Lightbox(燈箱)功能加入 Swiper 是一個明智的選擇。Lightbox 是一種常見的互動式圖片展示方式,它可以讓用戶單擊圖片時在一個彈出視窗中放大圖片,以提供更好的使用者體驗。這種結合可以為用戶提供更大的圖片展示空間,更方便地觀看圖片細節,並增加了互動性和使用便利性。

如何合併燈箱功能

這部分我已經實作在CodePen上,有興趣的可以參考下列程式碼,並可以直接在codePen上看執行結果,這樣最快

See the Pen
Untitled
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

閱讀更多

CSS 選取同層偶數元素,當 nth-child(even) 不起作用

在編輯網頁的時候很常會遇到這種情況,讓單數列與偶數列交錯,這次修改HTML不是我自己產生的,是由WordPress產生的,因此要透過CSS選擇器選取偶數列,將偶數的欄反轉,HTML結構大致如下,內容我省略

HTML:

CSS:

上述CSS不起作用,有點納悶查了一下,改用下列方法,就成功了

有遇到這問題的朋友可以試試看喔

[……]

閱讀更多

CSS RWD square 正方形

純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響

HTML:

CSS:

example:

See the Pen
CSS RWD square 正方形
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square

[……]

閱讀更多

HTML5 a tag force download

希望強制讓使用者下載檔案,但是在a標籤將網址指向檔案,在一些常用檔案例如:jpg、png、PDF,常會被瀏覽器直接開啟,無法直接下載,比較正規的做法是在發送 headers 時做這件事,但有時我們在處理靜態網頁就可以用偷吃步,在HTML5 a 標籤中多了一個download屬性,就可以用強制檔案用下載的方式讓使用者下載a標籤連結中的檔案,但這偷吃步要小心瀏覽器相容性

點我看效果 download PNG

[……]

閱讀更多

Youtube embed iframe API loop/repeat not working

有效解決這問題,除了loop=1以外,要多加一個 playlist 參數playlist=VIDEO_ID ,這對我有效

參考資料:
https://developers.google.com/youtube/player_parameters#loop
https://stackoverflow.com/a/25781957/6784662

[……]

閱讀更多

hide protected by reCAPTCHA v3

安裝 reCAPTCHA v3 之後,頁面右下角就會多出隱私權圖標這東西,在某些場合可能需要把它隱藏起來,可以透過下面方式隱藏

下方兩段CSS都可以隱藏 reCAPTCHA v3 圖示

注意:請不要使用 display: none 這可能會使reCAPTCHA v3失去作用

https://wordpress.org/support/topic/how-do-i-hide-recaptcha-v3-badge/
https://wordpress.org/support/topic/recaptcha-v3-badge-is-displayed-on-all-pages-not-only-form-pages/

[……]

閱讀更多