test 1-2 10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Double Page Spread Precise Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet" />
<style>
:root {
--a5-width: 420px;
--a5-height: 595px;
--square: 297.5px;
}
body {
margin: 0;
padding: 40px 0;
background: #f2f2f2;
font-family: sans-serif;
display: flex;
justify-content: center;
}
.spread {
display: flex;
width: calc(var(--a5-width) * 2);
height: var(--a5-height);
background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg');
background-size: cover;
background-position: center;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
border: 1px solid #ccc;
}
.page {
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
}
.page-left {
clip-path: inset(0 50% 0 0);
}
.page-right {
clip-path: inset(0 0 0 50%);
}
.photo-slot-1,
.photo-slot-2 {
position: absolute;
width: var(--square);
height: var(--square);
left: 0;
border-radius: 0;
overflow: hidden;
z-index: 1;
}
.photo-slot-1 { top: 0; }
.photo-slot-2 { top: var(--square); }
.photo-slot-1 img,
.photo-slot-2 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-right {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 70%;
height: auto;
max-height: 80%;
z-index: 1;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.photo-right img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 899px) {
.spread {
flex-direction: column;
width: var(--a5-width);
height: auto;
background-position: center top;
}
.page {
width: 100%;
height: var(--a5-height);
clip-path: none;
}
.photo-slot-1, .photo-slot-2 {
left: 10%;
}
.photo-right {
left: 50%;
transform: translate(-50%, -50%);
}
}
@media print {
body {
background: white;
padding: 0;
}
.spread {
width: 296mm;
height: 210mm;
background-size: cover;
page-break-after: always;
border: none;
box-shadow: none;
}
.page {
width: 148mm;
height: 210mm;
clip-path: none;
}
}
</style>
</head>
<body>
<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 Photo">
<div class="photo-slot-1">
<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 Photo">
<div class="photo-slot-2">
<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 Page Highlight">
<div class="photo-right">
<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>
</body>
</html>
by eGrida posted May 10, 2025
