javascript - 根据div标签的宽高样式属性显示图片

Question

所以我有这个示例来说明我需要什么:

CSS

.thumb-image { 
    height:450px;
    width:450px;
}
#image-container {
    width: 800px;
    height: auto;
}

html

<div id="image-container">
    <img src="Forest.jpg" class="thumb-image" alt="Forest" style="cursor: pointer;"  />
</div>

js

$('.thumb-image').click(function(){
    $(this).toggleClass('thumb-image');
});

此处图像是从客户端下载的完整尺寸。我不使用缓存图像，为了模拟缩略图，我只应用 width和 height到每个图像。但是我希望用户在点击它时能够看到更大的图像，所以我发现使用 $(this).toggleClass('thumb-image');是最合适的，因为这使我能够放大图像，然后将其变回预定义的尺寸，这没问题。但是有些图片太大所以我想限制 width显示图像的大小可以接受(在我的例子中是 800 像素)，而且我希望能够控制显示放大图像的位置，所以我创建了一个 <div id="image-container">。我想显示放大图像的地方。

问题是我不知道如何强制图像只占据 div 的空间而不放大 div，就像现在发生的那样。

Answer 1

你可以用这样的东西确保没有图像比它的容器宽；

#image-container img {
    max-width: 100%;
}

最好的解决方案是不要提供比您需要的更大的图像，以节省一些带宽；)