类似于如下的代码：

<div id="tFocusBtn">
<ul id="tFocus-pic">
{% for entry in marketimage %}
<li><a href="{{ entry.get_absolute_url }}"> <img src="/weblog/{{ entry.image}}" alt="{{entry.title}}" /></a></li>
{% endfor %}
</ul>
<a href="javascript:void(0);" id="tFocus-leftbtn">上一张</a>
<div id="tFocus-btn">
<ul class="clearfix">
{% for entry in marketimage %}
<li>{{entry.title}}</li>
{% endfor %}
</ul>
</div>
<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a>
</div>

通过jqeury的方式更改三个两个元素tFocus-pic、img，这样他们的尺寸随父级大小自适应。最终调节图片的尺寸大小。

代码如下：

$(document).ready(function(){  //页面文档自动加载时候执行。
var w = $("#tFocusBtn").width(); //获取父级别元素的宽度
$("#tFocusBtn ul").each(function(){ //遍历自元素对象
var sub_w = $(this).width(); //获取子元素对象当前宽度
var sub_h = $(this).height(); //获取子元素对象当前高度
if(sub_w>w){
var height = (w*sub_w)/sub_h;//计算新的高度
$(this).css({"width":w,"height":height});//修改元素css样式值
};
});
var w = $("#tFocus-pic").width();
$("#tFocus-pic li a img").each(function(){
var sub_w = $(this).width();
var sub_h = $(this).height();
if(sub_w>w){
var height = (w*sub_w)/sub_h;
$(this).css({"width":w,"height":height});
};
});
})