在网页设计中，经常会遇到图片自适应宽度的问题，很多时候我们需要使用javascript库来实现。jquery是其中比较流行的一个，它提供了非常简洁易懂的实现方案。

$(document).ready(function(){
$('img').load(function(){
var imgWidth = $(this).width();
var containerWidth = $(this).parent().width();
if(imgWidth >containerWidth){
$(this).css('width', '100%');
}
});
});

首先，我们需要给所有图片的外层元素一个固定的宽度，例如：

.container {
width: 800px;
}

然后，在jquery的ready方法中，我们绑定load事件。这样当图片加载完成后就会触发该事件。

$('img').load(function(){
// ...
});

接着，我们分别获取图片本身的宽度和父容器的宽度。

var imgWidth = $(this).width();
var containerWidth = $(this).parent().width();

如果图片宽度超过了容器宽度，我们就设置图片的宽度为容器的宽度。

if(imgWidth >containerWidth){
$(this).css('width', '100%');
}

最后，我们将以上代码全部放在document.ready()中即可实现图片自适应宽度的效果。

$(document).ready(function(){
$('img').load(function(){
var imgWidth = $(this).width();
var containerWidth = $(this).parent().width();
if(imgWidth >containerWidth){
$(this).css('width', '100%');
}
});
});