정렬 및 사이즈 조절 문의
본문
수고하십니다.
첨부 이미지나 에디터로 올린 이미지가
본문에서 나오는 소스 입니다.
삽입을 해 보니
큰이미지가 하나 나오고
그 아래 첨부 작은 이미지가 나옵니다.
첫번째 본문에 들어 갔을 때
보여지는 이미지가 가로 500px로 보이지는데
100%로 보여 질 수 있을 까요?
echo get_view_thumbnail($view['file'][0]['view'], 500);
부분의 500을 100%로 하면 사이트가 깨지더라구요.
그리고 하단에 나오는 작게 보이는 첨부 이미지 부분을
중앙 정렬 하고 싶은데 text-align: center 넣어도 변화가 없습니다.
조언 좀 부탁드립니다.
감사합니다.
<?php
echo "<div id='main-image' style='width: 100%; height: auto;'>";
// 첫 번째 이미지 크게 출력
$v_img_count = count($view['file']);
if($v_img_count) {
echo get_view_thumbnail($view['file'][0]['view'], 500);
}
echo "</div>";
// 추가 이미지 원본 출력
if ($v_img_count > 1) {
echo "<div id='thumbnail-container' style='display: flex; gap: 10px; margin-top: 10px;'>";
for ($i = 0; $i < min($v_img_count - 1, 6); $i++) { // 최대 5개의 원본 이미지 표시
echo "<div class='thumbnail' style='width: 100px; height: 100px; overflow: hidden;'>";
// 썸네일 생성을 위해 get_file_thumbnail 함수 사용
$thumb = $view['file'][$i]['view'];
preg_match('/src="([^"]+)"/', $thumb, $matches);
$image_url = isset($matches[1]) ? $matches[1] : '';
// 이미지 주소만 추출
if ($image_url) {
echo "<img src='" . $image_url . "' data-full='" . $image_url . "' style='width: 100%; height: 100%; align-items: center; object-fit: cover; cursor: pointer;' />";
}
echo "</div>\n";
}
echo "</div>\n";
}
?>
<script>
document.querySelectorAll('#thumbnail-container .thumbnail img').forEach(function(thumb) {
thumb.addEventListener('click', function() {
// 메인 이미지를 클릭된 썸네일의 큰 이미지로 변경
document.getElementById('main-image').innerHTML = "<img src='" + this.getAttribute('data-full') + "' style='width: 100%; height: 100%; object-fit: cover;' />";
});
});
</script>
답변 1
<style>
#main-image img { width:100%; }
#thumbnail-container { justify-content:center; }
</style>
한방에 해결 하였습니다.
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
