• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

이미지 리사이징에 대해서 질문드립니다.

20.04.29 01:12 작성 조회수 383

2

나름대로 커스터마이징 하는 과정중에서 이미지 리사이징과 관련된 부분에서 질문드립니다. 

정확히는 일정부분이상 사이즈가 큰 사진을 올릴경우 크기조절에관한 문제입니다. 

우선 새 게시글 작성을 통해 사진을 업로드하면 미리보기는 아래와 같이 나옵니다. 

문제는 실제 사진이 업로드 되었을 경우,  아래와 같이 양 옆이 넘쳐서 올라간다는 것입니다. 

위와 같은 문제 해결을 위해 제가한 방법들로는

1. <img> 태그에 직접 style을 먹여 margin = auto, 또는 itemcenter등 css를 적용해보았지만 미동도...하지않았습니다. 

2. post/models 에서 ResizeToFill 필드 부분의 해상도를 300 300 또는 그 이하로 줄여보았지만 오히려 올라오는 사진의 크기는 위와동일해지면서 그림화질만 깨지는 효과가 나왔습니다. 

3. save 메소드를 오버라이딩해서 리사이징을 시도해보았지만, 이 부분은 제가공부가 부족해서인지 아직 성과를 내진 못했습니다. (commit=false)를 통해서 그 실제 저장전 메소드를 구현해 리사이징해야한다는 데까진 알겠는데, 

그 리사이징 메소드를 어떻게 구현해야할지 감이 안오네요...

이런 사진 해상도와 관련된 리사이징은 어떻게 접근해야할지 조언을 구하고 싶습니다. 

답변 2

·

답변을 작성해보세요.

1

조영찬님의 프로필

조영찬

질문자

2020.05.08

앗 감사합니다 말씀해주신대로 다시 도전해보겠습니다!

1

안녕하세요 조영찬님 kindtiger입니다 :)

1. 업로드 썸네일 

해당 이미지 사이즈는 랜더 api 에서 캔버스의 크기로 넣고있기때문에 css로는 설정이 불가능합니다 ^^ 

우리수업에서는 전부 고정된 이미지의 크기들만 넣고있지만 이미지의 사이즈에 맞게 썸네일을 정하고싶으시다면 

캔버스의 썸네일을 뿌려주는 곳에서 이미지의 크기를 변수로 지정하여 이미지를 불러올때마다 크기를 계산해 넣어주는 스크립트를 받아와서 넣어주는 작업을 해야합니다 ^-^ 

2. 피드 썸네일 

해당 이미지에게 width:100%라는 속성을 사용하셨나요? 이미지에게 좌우값을 부모의 크기만큼 가져가라는 명령어를 입력해주셔야 이미지가 아무리 크더라도 부모의 형태에 맞춰 등장하게됩니다!