이미지 출력시 모바일/pc 다른 위치에 나오는 현상
본문
안녕하세요 매번 염치 없게 질문만 남깁니다..
도움 주신 분들 너무 감사하구요 ㅠㅠ
요번에 친한 형님이 중고폰 매입 하시는일을 한다해서..
그나마 주변 인맥중에 제가 홈페이지를 만들수 있으니..부탁을 하셔서..
제작중에 있는데요/..
다른건 아니고..사진 보시면 보이시겠지만..
PC에선 '상호명' 이란 글자이미지 (png 이미지 파일 입니다)
PC에선 정상 출력되오나..
모바일에선..
보시는 것처럼 아래 하단 최고단가 , 빠른 입금 밑에 들어가야할 상호명이
오른쪽 끝으로 가버렸습니다.
<section>
<a href="http://www.naver.com"> <img src="연락처이미지" width="100%;" height="auto;"> </a>
<div style="position: relative;"><img src="가운데 이미지" width="100%;" height="auto;"></img>
<div style="position: absolute;">
<div style="position: relative; top: -300px; left: 210px;">
<img src="상호명 텍스트 이미지" width="100%;" height="auto;"></img>
</div>
</div>
</div>
</section>
분명 width="100%;" height="auto;" 이걸 적용 했으나..
다른 사진은 모바일에서 정상 출력되는데 상호명' 이란 텍스트이미지가..
말썽을 부립니다..
아시는분 게시면 답변 부탁 드리겠습니다..!
답변 3
실제 페이지를 봐야 알겠네요
주소를 알려주세요~
아 그런가요 ㅠㅠ아직 만드는 중이라 ..제가 운영할것도 아니라 주소 공개는 쫌 그렇네요 ㅠㅠ
신경써주셔서 감사합니다!
top: -300px; left: 210px; 이것때문에 아닌가요?
모바일하고 반응형으로 하셨나요?
그렇게 하실려면 z-index사용해서 이미지사이즈는 똑같이 제작하시면 좋을 것 같습니다.
top: -300px; left: 210px; 이거 없으면 이미지 위에 이미지 겹칠수가 없더라구요 ㅠㅠ
메인 이미지 위에 상호명만 추후에 교체할 요령으로 만들고 있는지라..
으아 진짜 끝이 없이 어렵네요 z-index 저는 말도 처음 들어보네요 ㅠㅠ
이쪽으로 구글링 해봐야겠네요 ㅠㅠ힌트주셔서 감사합니다!
이미지 위에 겹치는게 z-index예요 ㅎ
말씀주신 z-인덱스 적용해 봤는데요 ㅠㅠ
결국 이것도 위치 조절하면 모바일에선 같은 현상이 일어나네요 ㅠㅠ
다시한번 힌트 감사드립니다 ㅠㅠ근데 이걸로 어찌 되는건 아니네요 ㅠㅠ
사이트 쪽지로 알려주세요.
그리고 z-index만 적용하지말고
앞의이미지 뒤의이미지 사이즈를 똑같이 해주셔야 똑같은자리에서 똑같이 줄어들겠죠.
미디어 쿼리로 모바일 접속시 z-index나 position 값을 다시 주시면 되지 않을까요