HTML 이미지 사이징이 안됩니다
-
게시물 수정 , 삭제는 로그인 필요
제가 HTML로 웹사이트 이미지 콘텐츠를 첨부해야 하고, 그 이미지가 브라우저의 크기에 따라 width 100%가 채워졌으면 좋겠는데 map 태그를 사용하여 링크를 건 버튼 크기는 따로 놉니다 아래 코드와 같이 MAP 태그를 이용하여 이 이미지 내에 여러가지 링크를 걸었는데 이미지 내에 링크를 건 위치가 바뀝니다. 어떻게 하면 이미지와 map 링크가 같이 브라우저 크기에 맞게 출력이 될까요? 코드를 어떻게 수정하면 될지 알려주세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.container {
position: relative;
}
.container > img {
position: absolute;
max-width: 100%;
/* height: 100%; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="img/웹진.jpg" name = "map01" id = "map01" alt="" usemap="#map01">
<map name="map01" id="map01">
<area shape="rect" coords="330, 793, 3189, 2364" href="https://museumhaslla.com/home_new" target="_blank" alt="https://museumhaslla.com/home_new">
<area shape="rect" coords="330, 3476, 870, 4019" href="https://museumhaslla.com/home_new" target="_blank" alt="https://museumhaslla.com/home_new">
<area shape="rect" coords="330, 6821, 1247, 7682" href="https://museumhaslla.com/home_new" target="_blank" alt="https://museumhaslla.com/home_new">
</map>
</div>
</body>
</html>
아래 코드와 같이 MAP 태그를 이용하여 이 이미지 내에 여러가지 링크를 걸었는데 이미지 내에 링크를 건 위치가 바뀝니다. 어떻게 하면 이미지와 map 링크가 같이 브라우저 크기에 맞게 출력이 될까요? 코드를 어떻게 수정하면 될지 알려주세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.container {
position: relative;
}
.container > img {
position: absolute;
max-width: 100%;
/* height: 100%; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="img/웹진.jpg" name = "map01" id = "map01" alt="" usemap="#map01">
<map name="map01" id="map01">
<area shape="rect" coords="330, 793, 3189, 2364" href="https://museumhaslla.com/home_new" target="_blank" alt="https://museumhaslla.com/home_new">
<area shape="rect" coords="330, 3476, 870, 4019" href="https://museumhaslla.com/home_new" target="_blank" alt="https://museumhaslla.com/home_new">
<area shape="rect" coords="330, 6821, 1247, 7682" href="https://museumhaslla.com/home_new" target="_blank" alt="https://museumhaslla.com/home_new">
</map>
</div>
</body>
</html>
#html 이미지 넣기 #html 이미지 가운데 정렬 #html 이미지 크기 줄이기 #html 이미지 크기 자동 조절 #html 이미지 링크 #html 이미지 안나올때 #html 이미지 경로 #html 이미지 태그 #html 이미지 위에 텍스트 #html 이미지 슬라이드
