유튜브배너이미지 모바일에서 사이즈문의드려요 채택완료

홈페이지 유튜브제이쿼리 사용중인데 모바일에서 같은소스 사용하려고합니다.

문제는 모바일에서 기종마다 이미지사이즈가 달라져야하는데 고정되다 보니깐 화면을늘려도 이미지가 같이늘어지지 않아서 어떻게 해야 바뀌는 알려주세요 ㅠㅠ 부탁드립니다

소스첨부합니다

---------------------------------------------------------------------------------------------------------------

--css-->

/* 유튜브배너모바일 */ .youtube_wrap_m img { max-width: 100%; height: auto; } .youtube_wrap_m { height: 1000px; display:inline-block; width:100%; min-width:370px; text-align:center; margin-top:50px;  background-image: url('../images/youtube_bg_m.jpg'); background-repeat:no-repeat; background-position:50%;} .youtube_wrap_m p { margin-top: 30px; margin-bottom: 20px;} .youtube_m { margin: 0 auto; width:370px; height:99px;} .youtube_m ul {} .youtube_m li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;} .youba_m1 { height:98px; text-align:center; margin-right: 5px;  } .youba_m2 { height:98px; text-align:center; margin-right: 5px; } .youba_m3 { height:98px; text-align:center; margin-right: 5px; } .youba_m4 { height:98px; text-align:center; } .youba_m5 { height:98px; text-align:center; margin-right: 5px;  } .youba_m6 { height:98px; text-align:center; margin-right: 5px; } .youba_m7 { height:98px; text-align:center; margin-right: 5px; } .youba_m8 { height:98px; text-align:center; } .youtube_m1 {margin: 0 auto; width:370px; height:99px;} .youtube_m1 ul { } .youtube_m1 li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;} .youba_m1 { height:98px; text-align:center; margin-right: 5px;  } .youba_m2 { height:98px; text-align:center; margin-right: 5px; } .youba_m3 { height:98px; text-align:center; margin-right: 5px; } .youba_m4 { height:98px; text-align:center; } .youba_m5 { height:98px; text-align:center; margin-right: 5px;  } .youba_m6 { height:98px; text-align:center; margin-right: 5px; } .youba_m7 { height:98px; text-align:center; margin-right: 5px; } .youba8 { height:98px; text-align:center; } .youtube_m2 {margin: 0 auto; width:370px; height:99px;} .youtube_m2 ul { margin-bottom: 5px;} .youtube_m2 li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;} .youba_m1 { height:98px; text-align:center; margin-right: 5px;  } .youba_m2 { height:98px; text-align:center; margin-right: 5px; } .youba_m3 { height:98px; text-align:center; margin-right: 5px; } .youba_m4 { height:98px; text-align:center; } .youba_m5 { height:98px; text-align:center; margin-right: 5px;  } .youba_m6 { height:98px; text-align:center; margin-right: 5px; } .youba_m7 { height:98px; text-align:center; margin-right: 5px; } .youba_m8 { height:98px; text-align:center; } .youtube_m3 {margin: 0 auto; width:370px; height:99px;} .youtube_m3 ul { margin-bottom: 5px;} .youtube_m3 li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;} .youba_m1 { height:98px; text-align:center; margin-right: 5px;  } .youba_m2 { height:98px; text-align:center; margin-right: 5px; } .youba_m3 { height:98px; text-align:center; margin-right: 5px; } .youba_m4 { height:98px; text-align:center; } .youba_m5 { height:98px; text-align:center; margin-right: 5px;  } .youba_m6 { height:98px; text-align:center; margin-right: 5px; } .youba_m7 { height:98px; text-align:center; margin-right: 5px; } .youba_m8 { height:98px; text-align:center; }