이미지를 업로드 할때..
진나
2023.04.01
안녕하세요..
예를 들면 img를 담고 있는 컨테이너 사이즈가 height:300px;로 고정일 때 세로사이즈가 300px이 넘는 이미지를 업로드 해도
무조건 세로사이즈 300px로 축소해서 보이게 할 수 있나요?
머 overflow로 짤리게 하지 않고.. 이미지 크기에 따라 감싸고 있는 태그가 확장되는 게 아니라.. 가령 500*500px의 이미지를 올리면 300*300px로 무조건 출력하게 하는 거.. css로만 할 수 있는 지 궁금하네요.. 자바스크립트로만 가능한가요?
-
흰양말
ㅇㅇ 어쩔수가 없는.. 스크립트로 제어해주지 않는이상..
-
초코우유
하지만 발생 가능한 이슈사항은 있습니다.
300 * 300 은 가로 세로가 모두 동일한 이미지에서는 문제가 없지만, 둘 중 하나가 길어버리면 이미지가 찌그러지는 현상이 발생이 되죠.
CSS로는 \긴 녀석을 기준으로\라는 걸 처리할 수 없기에 가로/세로 비율이 1:1 이 아니면 애매한 상황이 올 수도 있습니다.
또한, 300*300 보다 더 작은 이미지의 경우도 강제 확대가 되어지는 것이니 이미지 흐림현상이 나타날 수 있구요
여러가지 상황을 생각해 -
도란
헉뜨.. 간단한 문제였군요.. 복잡할거라 생각하고 해보지도 않았던건데.. 반성해야겠네요..;
암튼 조언 감사드립니다. -
예님
img{widht:300px; height:300px;}