html 및 css에서 아주 큰 이미지를 요소 크기에 적절하게 조절하는 방법.

Question

ABCDEFG

.detail-body-container { height: 100vh; display: grid; grid-template-rows: 4fr 3fr; } .contents { }원본 이미지가 아주 큰 이미지를 요소의 크기에 맞게 적절하게 조절하는 방법이 뭐가 있나요?위 코드처럼 부모 컨터이너에서 자식 요소를 gird를 사용해 4:3으로 나누고 4의 크기인 영역에 API에서 이미지를 불러와 적용해주고 있는데요, 불러오는 원본 이미지의 크기가 너무커 요소내에서 이미지가 잘린채로 나옵니다.어떻게하면 이미지가 자동으로 자동 스케일링 되어 맞게 조절 할 수 있나요?

월급은나의빛 · Accepted Answer

생각하시는 게 이런 건가요?Grid Backgroundview source code 버튼으로 소스를 볼 수 있습니다. background-size: 100% 100%; 가 포인트인 것 같습니다.

leon808 · Answer

background-size : contain 이거 하면 안 되나요?

몰랑토끼 · Answer

https://jsfiddle.net/cbk2t1xg/

doolee22 · Answer

화면을 구성하는 프레임웍이 뭔지는 모르겠으나, 백단을 spring boot를 이용한다면, 아래와 같이 썸네일을 만들어주는 dependency를 추가하고,컨트롤러 상에서 섬네일 이미지 파일과 원본 이미지 파일을 특정 경로에 적재 후에 경로 각각을 화면으로 리턴해서,화면에서 섬네일과 원본 이미지 파일 링크를 컨트롤 하는 방법은 어떤가요?제가 요즘 스프링 부트를 스터디 하면서 보고 있는 책의 내용입니다. 코드로 배우는 스프링 부트 웹 프로젝트 남가람 북스, 구멍가게 코딩단.. 2020/12/25 Part4 > Chapter8 의 내용 참조.implementation group: 'net.coobird', name: 'thumbnailator', version: '0.4.12'

fork · Answer

object-fit: cover

둥글레차 · Answer

background에 cover로 주신것 같긴한데, 개발자 도구에서 div.detail-body-container 엘리먼트에 잘 적용되고있는지 확인해보셨나요 ?

html 및 css에서 아주 큰 이미지를 요소 크기에 적절하게 조절하는 방법.

6개의 답변

Q&A 목록