메인배너 사이즈 문의 답변좀부탁드립니당...ㅠㅠ
본문
/*메인배너*/
#main_bn_box{border:1px solid #e8e8e8;margin-bottom:45px;width:900px;height:120px;overflow:hidden}
#main_bn {position:relative;overflow:width:auto;100% !important}
#main_bn .bn_ul{margin:0;padding:0}
#main_bn .bn_ul li{float:left;list-style:=none}
#main_bn li .bn_wr{}
#main_bn .dots{position:absolute;bottom:10px;text-align:center;width:900%}
#main_bn .dots li{cursor:pointer;margin-right:10px;text-indent:-9999px;width:10px;height:10px;border-radius:50%; background:#2c68b0;overflow:hidden;display:inline-block;zoom:1; *display:inline /*IE7 HACK*/; _display:inline; /*IE6 HACK*/}
#main_bn .dots li.active{background:#fda100}
사이즈를 120으로 줄이고 이미지를 올리니깐 사진이 꽉안차고 작게나오는데 어떤부분을 수정해야지
배너이미지 업로드하면 1000%딱맞게 올라가나요?ㅠㅠㅠ 고수님들 답변좀부탁드립니당.ㅠㅠㅠ
답변 3
다음과 같이 해 볼 수 있을 것 같습니다
원하시는 스타일대로 적절히 수정을 하시면 되지 않을까 합니다.
/*메인배너*/
#main_bn_box {
border: 1px solid #e8e8e8;
margin-bottom: 45px;
width: 120px; /* 이미지 크기로 수정 */
height: 120px; /* 이미지 크기로 수정 */
overflow: hidden;
}
#main_bn {
position: relative;
overflow: hidden; /* 수정된 부분 */
}
#main_bn .bn_ul {
margin: 0;
padding: 0;
}
#main_bn .bn_ul li {
float: left;
list-style: none;
}
#main_bn li .bn_wr {}
#main_bn .dots {
position: absolute;
bottom: 10px;
text-align: center; /* 수정된 부분 */
width: 100%; /* 수정된 부분 */
}
#main_bn .dots li {
cursor: pointer;
text-indent: -9999px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #2c68b0;
overflow: hidden;
display: inline-block;
zoom: 1; /*IE7 HACK*/
*display: inline; /*IE6 HACK*/
_display: inline; /*IE6 HACK*/
margin-right: 0; /* 수정된 부분 */
}
#main_bn .dots li.active {
background: #fda100;
}
이렇게 하면 이미지가 120px로 올바르게 표시되어 배너에 딱 맞게 나타날 것으로 생각합니다.
배너 이미지의 크기를 조절한 후, CSS 스타일을 수정하여 원하는 레이아웃을 얻을 수 있지 않을까 합니다.
img태그에 아래 속성을 넣어보세요
<img src="이미지경로" style="width:100%;height:100%;object-fit:cover" />
적용시켜보니깐 이미지가 꽉차긴했는데 조금짤리는거 같은데 이런경우는 어떻게 해야하나요?ㅠㅠㅠ귀찮게해드려서죄송합니다.ㅠㅠ초보라서여ㅠㅠ
찌그러져도 상관없다면 object-fit을 뺴면됩니다. 상위객체의 높이가 따로 지정된게 아니면 width:100%만 쓰면 넓이는 꽉차고 높이가 조절되겠지요. 상위객체의 사이즈가 고정이면 찌그러지거나, 짤리는부분이 생기는건 감수해야합니다.
#main_bn_box {
border: 1px solid #e8e8e8;
margin-bottom: 45px;
width: 900px;
height: auto; /* 변경된 부분 */
overflow: hidden;
}
#main_bn {
position: relative;
overflow: hidden; /* 수정: width:auto; 제거 */
width: 100%; /* 추가: 이미지 너비 100%로 확장 */
}
