22
<style>
.spread {
display: flex;
width: 840px;
height: 595px;
margin: 0 auto;
background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg');
background-size: cover;
background-position: center;
border: 1px solid #ccc;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
position: relative;
z-index: 1;
}
.page {
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
}
.1p-photo1 {
width: 297.5px;
aspect-ratio: 1 / 1;
overflow: hidden;
position: absolute;
left: 0;
}
.1p-photo1 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.1p-photo1.top {
top: 0;
}
.1p-photo1.bottom {
top: 297.5px;
}
.2p-photo1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 70%;
aspect-ratio: 1 / 1;
overflow: hidden;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.2p-photo1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ✅ 모바일 대응 */
@media (max-width: 767px) {
.spread {
flex-direction: column;
width: 100%;
height: auto;
background: none;
}
.page {
width: 100%;
height: 595px;
background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg');
background-size: 200% auto;
background-repeat: no-repeat;
background-position-y: center;
}
.page-left {
background-position-x: left;
}
.page-right {
background-position-x: right;
}
.1p-photo1 {
left: 0;
}
.2p-photo1 {
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<div class="spread">
<!-- Page 1 -->
<div class="page page-left">
<a href="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" data-lightbox="album" data-title="Top Left">
<div class="1p-photo1 top">
<img src="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" alt="Top Left">
</div>
</a>
<a href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" data-lightbox="album" data-title="Bottom Left">
<div class="1p-photo1 bottom">
<img src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" alt="Bottom Left">
</div>
</a>
</div>
<!-- Page 2 -->
<div class="page page-right">
<a href="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" data-lightbox="album" data-title="Right Highlight">
<div class="2p-photo1">
<img src="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" alt="Right Highlight">
</div>
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet" />
by eGrida posted May 13, 2025
