CSS模板雙人拍照全身可以幫助你在網站中展示雙人拍照的完整照片,讓用戶更好地了解你的產品、服務或團隊成員。以下是一個基本的CSS模板代碼示例:
.wrapper { display: flex; justify-content: center; } .photo-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 1000px; } .photo-wrapper { margin: 10px; } .photo-wrapper img { max-width: 200px; max-height: 300px; object-fit: cover; border-radius: 50%; } .photo-wrapper h3 { margin: 10px; text-align: center; }
這個示例代碼中包含了四個主要的類:
.wrapper
: 這個類用于將所有的照片容器放在中央位置。.photo-container
: 這個類是每一個照片容器的父元素,它使用Flexbox布局將所有的照片水平居中。.photo-wrapper
: 這個類是每一張照片的容器,它設置了照片的邊距,并使用Flexbox布局將其放在同一行。img
: 這個元素是照片本身,使用object-fit: cover
屬性將照片縮放并填充整個容器,使用border-radius
屬性將其變成圓形。
通過這個模板,你可以創建一個包含兩個人的照片墻,用戶可以通過鼠標懸停查看更多細節,或者單擊照片跳轉到相應的個人介紹頁面。