Edit in JSFiddle

$('#content').resizable();

<div id="content">
    <h4>Auto resizing image:</h4>
    <img id="fx" src="http://mozilla.com.tw/media/img/styleguide/identity/firefox/guidelines-logo.png?2013-06"/>
    <h4>Auto resizing background image:</h4>
    <div id="join"></div>
</div>
<div id="tip">←虛線可拖曳縮放</div>

#fx {
    display: block;
    max-width: 100%;
    height: auto;
}

#join {
    display: block;
    background-repeat: no-repeat;
    background-image: url(http://mozilla.com.tw/media/img/mocotw/community/joinus-banner.png);
    background-position: 50% 50%;
    background-size: 100% auto;
    width: 100%;
    height: 100px;
}

#content {
    display: inline-block;
    max-width: 400px;
    width: 100%;
    height: auto;
    border: 1px dotted gray;
}

#tip {
    display: inline-block;
    vertical-align: top;    
}