0

所以我有这个样本来说明我需要什么：

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。

4

3 回答 3

2

你可以确保没有图像比它的容器更宽，就像这样；

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

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

于 2013-06-07T07:11:59.557 回答
1 
<style>
    .thumb-image {
        height: 450px;
        width: 450px;
    }

    #image-container {
        max-width: 800px;
        height: auto;
    }

    #image-container img {
        width: 100%;
    }
</style>
于 2013-06-07T07:15:31.720 回答
1

您可以overflow:hidden在您的image-containerdiv 中使用，也可以为 img 标签分配 100% 的宽度。

建议 ：-

这不是执行此操作的最佳方式。如果您的图像容器的宽度小于您应该使用图像缩略图库调整图像大小。使用调整图像大小而不是使用 html 和 css 控制高度宽度有很多好处。

  • 小尺寸图像需要更少的时间来加载页面
  • 图像看起来不错。无拉伸
于 2013-06-07T07:14:05.447 回答