[문의] 메우님 소스) 안에 상자의 사이즈를 고정시키는 방법이 있나요

<div style="background: url('https://upload2.inven.co.kr/upload/2016/12/21/bbs/i13889243974.jpg'); font-size: 11px;">

<div style="background: url('https://upload2.inven.co.kr/upload/2016/12/21/bbs/i16093575172.png') no-repeat 0px bottom; min-height: 400px;">

<div style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); padding: 4px 6px;">

<div style="background: url('http://www.randomurl.ze.am/e/jd.php?d=2011-01-10 14:46:48&c=fbb2ab#.png'); height: 20px;"></div>

</div>

<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 16px; margin-left: 6px; color: #fbb2ab; border-radius: 6px; border: 1px solid #fbb2ab; overflow: hidden; font-size: 11px; padding: 0;" data-inven-action="last-attack-5,last-attack-10,last-attack-all,search-profile" data-no-tooltip data-inven-result-detail>

<span data-inven-attr-for="input" style="float: left; margin: 2px 1px 0 4px; width: 130px; font-size: 11px; color: #fbb2ab; padding: 0 2px; height: 17px;"></span>

<span data-inven-attr-for="button" style="float: left; margin: 0 0 0 1px; padding: 6px 4px 4px 4px; background-color: #fbb2ab; color: white; border: 0; font-size: 11px; line-height: 100%; height: auto;"></span>

<span data-inven-attr-for="action-result" data-position="out" style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 2px; margin-left: 6px; color: #fbb2ab; border-radius: 6px; border: 1px solid #fbb2ab; padding: 4px 6px; font-size: 11px; width: 300px;"></span>

</div>

<div data-inven-tabs style="padding-top: 16px;">

<div style="float: left;">

<div data-inven-tab-for="0" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #fbb2ab; color: white; cursor: pointer;">♬</div>

<div data-inven-tab-for="1" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #fbb2ab; color: white; cursor: pointer;">인장</div>

<!--새 버튼 추가하는 곳-->

</div>

<div style="margin-left: 30px; margin-top: 6px; padding-bottom: 12px;">

<div data-inven-tab-id="0" style="min-height: 300px;"><!--메인 메뉴 내용-->

<div style="display: block; width: 204px; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #fbb2ab;">

<div style="border-bottom: 1px solid #fbb2ab; color: #fbb2ab;padding: 4px 8px; font-weight: bold;">K?saka Honoka<br />코우사카 호노카</div>

<div style="padding: 4px 8px;">

생  일 : 8월 3일<br/>

별자리 : 사자자리<br/>

혈액형 : O 형<br/>

B W H  : 78 - 58 - 82<br/>

취  미 : 수영, 스티커 수집<br/>

좋아하는 음식 : 빵<br/>

</div>

</div>

</div>

<div data-inven-tab-id="1" style="display: none;"><!--메뉴 1 내용-->

<div style="display: inline-block; padding: 4px 8px; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #fbb2ab;">

<img src="https://upload2.inven.co.kr/upload/2016/12/21/bbs/i14068512069.gif" width="80%" border="0">

<img src="https://upload2.inven.co.kr/upload/2016/12/18/bbs/i15654230844.png" width="80%" border="0">

</div>

</div>

<!--새 내용 추가하는 곳-->

</div>

</div>

</div>

</div>

현재 스크립트 상태입니다. 

이상태로 적용하면

이상로 적용하면 

이런식으로 안쪽 흰색 박스가

우측 끝에 닿을정도로 커져있네요. 

아마 배경의 원본이 된 그림의 가로사이즈를 기반으로 틀이 잡히는것 같은데

이걸 강제적으로 고정시키는 방법이 없을까요?

다른분들은 그림파일을 업로드 후 

<img src="https://upload2.inven.co.kr/upload/2016/12/21/bbs/i13057580476.png" border="0" width="400">

같이 코드로 width 값을 설정하면 알아서 맞춰진다고 하시는데

저는 안되네요 ...

지금은 업로드한 png 파일의 가로사이즈를 줄인 상태로 재업로드, 적용시키니까

원하는정도의 사이즈로 적용이 되어있습니다만

gif 파일같은 경우 줄이기가 애매해서 ...