지금 계속 몇시간째 삽질을 하고 있습니다.
이게 사진이 크면 알아서 딱 맞춰서 나오는게 사진 사이즈가 작으면 공백이 생겨서 보기 싫어서.ㅠ.ㅠ
계속 삽질을 해보곤 있는데 한계점이 오네요.ㅠ.ㅠ
어디를 어떻게 손봐야 하는지 조언좀 해주시면 감사하겠습니다.
오늘 습하고 더운데 건강들 챙기시고 좋은 하루 보내시기 바래요^^
| PHP | PHP 5.6 |
|---|---|
| CMS | XpressEngine |
-
width 사이즈를 고정해야할듯한데요. -
그 사이즈를 고정하는곳이 아무리 뒤져도 보이질 않네요.ㅠ.ㅠ -
CSS 로 제어하세요.
img class 명이 DW_img 이네요 -
위젯에서 불러오는 썸네일의 옵션에 크롭이 없나보네요.
아니면 썸네일이 아닌 첨부이미지를 불러오거나요.
좀 애매한 구조에요.
.item a.slide_link img.DW_img의 width를 100%, height는 auto로 하면 가로는 100%로 차겠지만 세로 높이가 이미지 비율에 따라서 들쭉 날쭉이 됩니다.
a태그에 높이를 지정하기는 좀 애매하니 a태그를 감싸는 div를 추가하구요.
div의 높이를 일정하게 제어를 합니다. 자바스크립트로 width의 비율에 맞춰서 제어해도 되겠죠.
반응형이 아니라면 고정px로 넣어도 되겠지만... 반응형이네요.
그리고 overflow: hidden을 주면 아래쪽은 안보이게 됩니다.
이렇게 하면... 세로 비율이 짧은 경우가 문제가 되죠. 아래쪽이 빈 경우가 발생하거든요.
그래서 가로 세로 비율과 이미지의 비율을 가지고 세로를 100%로 줄지, 가로를 100%로 줄지 계산하게 해야 해요.
그러고 나면 가운데 정렬이 문제가 됩니다.
좌상단으로 붙어 버리거든요.
img를 싸고 있는 div의 가로 세로 비율과 이미지의 가로 세로 비율에 따라서 img를 한번 더 div로 감싸서 position을 absolute로 주고 top나 left를 계산해서 넣어줘야 해요.
말이 장황하고 긴데 적으면서도 이게 이해가 되나? 맞나? 싶네요.
요점은 가로든 세로든 남는 부분이 없게 하고, 넘치는 부분은 안보이게 하고, 가운데로 정렬시킨다 입니다.-0-;;;; -
이미지 비율이 깨져도 상관없다면...... 이미지를 감싸는 div를 추가하고 div의 가로는 100% 세로는 가로 길이에 따라 비율로 맞추준 다음 img의 가로 세로를 100%로 주면 됩니다.
-
?
원본비율을 유지하더라도
높이 기준인가 넓이 기준인가에 따라 다릅니다.
한번 넓이를 원하는 넓이 기준에 높이를 크게 잡고
한번은 높이를 원하는 높이 기준에 넓이를 크게잡고 해 보세요. -
아이고 모든 분들 정말 감사합니다. 아직 제대로 이해는 안가지만 하나씩 차근차근 시도해볼께요..^^;;