[removed]
.pm-wrap { max-width: 720px; margin: 0 auto; }
.pm-media { margin: 0 0 12px 0; }
.pm-square {
width: 100%;
aspect-ratio: 1 / 1; /* ✅ 정사각형 */
overflow: hidden;
border-radius: 10px; /* 선택: 앱 느낌 */
background: #111; /* 로딩/여백용 */
}
.pm-square img {
width: 100%;
height: 100%;
object-fit: cover; /* ✅ BoxFit.cover 동일 */
display: block;
}
/* aspect-ratio 미지원 브라우저 fallback (구형) */
.pm-square-fallback {
position: relative;
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius: 10px;
background: #111;
}
.pm-square-fallback img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pm-place a { text-decoration: none; }
.pm-footer { margin-top: 14px; font-size: 12px; opacity: 0.85; }
</style>
<div class="pm-media">
<div class="pm-square">
<img src="https://d1fmlld5gaikrh.cloudfront.net/images/d1fafc29ef773dc393889b4a7ae2de5b9a06e28f3124c9e4c61987d5d3e2d07d" alt="Image" loading="lazy">
</div>
</div>
<div class="pm-media">
<div class="pm-square">
<img src="https://d1fmlld5gaikrh.cloudfront.net/images/80056a867219a7dee7d2f02a6c958ccb9c159b42f0fbf50c86a5a1627b591166" alt="Image" loading="lazy">
</div>
</div>
<div class="pm-media">
<div class="pm-square">
<img src="https://d1fmlld5gaikrh.cloudfront.net/images/b09430d3500f5f1d859a9b659823edd377e748e6a49d6dd4bee197cbc2e2f968" alt="Image" loading="lazy">
</div>
</div>
<div class="pm-media pm-place">
<div class="pm-square">
<img src="https://d1fmlld5gaikrh.cloudfront.net/images/a96ced2cefd80f27443443f922b48be7eedb0a6b72c1eff506c61987c0dd1d12" alt="Map" loading="lazy">
</div>
<div style="margin-top:8px;">
<a href="https://www.google.com/maps/search/?api=1&query=Google&query_place_id=ChIJBUc0V27aaDURJEaPaoOlLzE">
949 Seongbuk-dong, Gangseo-gu, Busan, South Korea<br>대한민국 부산광역시 강서구 성북동 949
</a>
</div>
</div>
<div><p>테스트</p></div>
<div class="pm-footer">
<a href="https://www.mozilla.org/en-US/">
This post was created using the Percent Map mobile app<br>
이 게시글은 Percent Map 모바일 앱에서 작성되었습니다.
</a>
</div>
</div>
