모바일 화면 가로에 맞게 이미지, 동영상 크기 조절하는 방법 다시 질문해요,

PIREE

2017-01-03 (화) 06:59:18 12,246

모바일에서 화면보다 큰 이미지나 동영상의 폭을 폰의 화면과 맞춤하게 하고 싶습니다.

어떤 폰으로 보던 그 폰의 화면보다 넓은 이미지나 넓은 동영상을 폰의 화면안에 다 들어오게 하고 싶어요.

이 방법 아시는 분 답변주시면 고맙겠습니다.

그누보드5 모바일화면맞춤

채택된 답변

+20 포인트

탈퇴회원

2017-01-03 (화) 07:40:42

이미지는 그누보드 모바일 자체가 자동으로 줄어들게 세팅되어 있는 모양이더군요.

PIREE

2017-01-04 (수) 01:56:30

답변 고맙습니다.
첫번째 URL의 방법으로 적용하였습니다.

웨비온

2017-01-03 (화) 10:32:12

모바일에서 이미지는 css로 조절이 가능합니다.

예를들어

</div>

위와 같은 형태로 UI를 작성했다면

<style>

.position{position:relative;width:100%;overflow:hidden}

.position .img-area{display:block;padding:5%}

.position .img-area img{display:block;width:100%;}

</style>

위와 같이 작성을 한다면 전체 사이즈 100% 안에 패딩이5%로 가로 90%안으로 이미지가 리사이징 되어 들어가게 됩니다.

위 예제를 참고로 해보세요.

동영상도 마찬가지로 width:100% 로 잡아주시면 됩니다.

답변을 작성하려면 로그인이 필요합니다.