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限制在可接受的范围内（在我的情况下是800px），并且我希望能够控制放大图像的显示位置我创建了一个<div id="image-container">，我希望在其中显示放大的图像。

问题在于我不知道如何强制图像仅占用div的空间而不会像现在那样放大div。

Answer 1

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

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

最好的解决方案是不提供超出您需要的图像，节省一些带宽;）

Answer 2

您可以在overflow:hidden div中使用image-container，也可以为img标记指定100％的宽度。

建议： -

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

小尺寸图片占用较少的页面加载时间
图片看起来不错。没有伸展

Answer 3

<style>
    .thumb-image {
        height: 450px;
        width: 450px;
    }

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

    #image-container img {
        width: 100%;
    }
</style>

根据div标签宽度和高度样式属性显示图像

CSS

HTML

JS

3 个答案: