업로드 된 이미지 사이즈 비율 맞추기

2216 단어 프론트엔드CSSCSS

업무 중에 굉장히 귀찮은 일 중 하나는 CSS 다.
그중에서도 이미지 사이즈를 균일하게 맞추는것인데 ...

이번 프로젝트의 경우 object-fit 을 사용할 수 없었다.
클라이언트의 고객들 대부분이 IE를 쓰는 세대라 포기하고 머리를 굴려봤는데 도저히 img로는
들쑥날쑥한 이미지를 해결할 수 없었기에
div를 이용하기로 했다.

기존에 되어있던 img 태그를 숨겨주고

<img src="<?php echo PATH_IMG_PATH . "case/" . $row['img1'] ?>" alt="" style="display:none">

div 를 만들어 background로 대체하여 cover를 주었더니
나쁘지않게 비율이 맞아 떨어지게 되었다.
class 만들어 css 작성을 하는게 더 좋겠지만 이때는 급해서 일단 인라인으로 넣었다 ㅎ..

<div style="background-image:url(<?php echo PATH_IMG_PATH . "case/" . $row['img1'] ?>);background-size: cover;height: 570px;background-repeat: no-repeat;width:490px;background-position: center;border-radius:20px"></div>

IE가 완전 종료되기까지 얼마 안남았다.
하지만 엣지에서도 IE로 보는 방법이 있기에 언제까지 IE를 대응해야할지 모르겠지만 ,
얼른 모든 css 기술도 사용가능하면 좋겠다.

좋은 웹페이지 즐겨찾기