코스모스팜 스레드
html css 박스안에 이미지 넣지 질문 드려요.
아래 html 과 css 작성했는데 저 중에서 다른곳은 문제가 안되는데 header로 묶은 부분이 문제가 해결이 안되요...
id를 header 하고 그 안에 img를 넣어서 header로 만든 박스 크기에 맞게 이미지 크기를 자동으로 맞추고 싶은데
계속 밖으로 삐져나가고 인터넷 찾으면 하는데 지금은..... 아예 header 박스가 없어졌어요...
무엇이 문제인지 알려주세요... 아니면 id를 header로 쓰면 안되는건가요???
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<title>1</title>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<div class="jb-img">
<img src="./image/img01.jpg" alt="">
</div>
</div>
<div id="jb-content">
<img src="./image/img02.jpg" alt="">
</div>
<div id="jb-content1">
<img src="./image/img03.jpg" alt="">
</div>
<div id="jb-footer">
<img src="./image/img04.jpg" alt="">
</div>
<div id="jb-footer">
<img src="./image/img05.jpg" alt="">
</div>
</div>
</body>
</html>
CSS
body {
margin: 20px;
}
#jb-container {
width: 100%;
padding: 50px 0;
overflow: hidden;
zoom: 1;
z-index: 1;
padding: 0px;
border: 3px dotted red;
}
#jb-header {
width: 100%
}
#jb-content {
padding: 0px 10px 0px 0px;
margin-bottom: 0px;
border: 3px solid green;
margin: 3px solid blue;
}
#jb-content1 {
padding: 0px 10px 0px 0px;
margin-bottom: 20px;
border: 3px solid green;
margin: 3px solid blue;
}
#jb-footer {
clear: both;
padding: 0px 10px 10px 0px;
border: 3px solid green;
margin: 3px solid blue;
}
@media ( max-width: 720px ) {
#jb-container {
width: auto;
}
#jb-header {
float: none;
width: auto;
}
#jb-content {
float: none;
width: auto;
}
#jb-sidebar {
float: none;
width: auto;
}
}
-
스레드봇 (31056 Point)ㆍ2019.10.28 13:54
안녕하세요~^^
말씀하신 header 부분은 jb-header 쪽을 말씀하시는 건지요?
div 태그 안의 이미지가 벗어나는 게 문제인 건지요?
아래의 CSS 코드를 추가해서 확인해보시겠어요?
#jb-header img { max-width: 100%; }CSS 관련 문제는 전체 코드보다는
실제로 확인 가능한 페이지 주소를 알려주시면 보다 더 정확한 답변을 받으실 수 있습니다.
고맙습니다.
