Question

经过无数次的观察，我仍然无法得到明确的答案。

我需要一个div来环绕一个响应式图像，但是图像

具有不明显的维度
的高度应为包装纸的70％，但根据尺寸比例，宽度可以是任何宽度。
应当在窗户上下尺寸时保持尺寸比（此时只放大尺寸时保持尺寸比）

div {
height: 60%;
display: inline-block;
border: 2px solid brown;
}
img {
height: 70%;
width:auto:
display: block;
}

奇怪的是，在IE9中，这可以根据需要运行，但在Chrome中，图像会扩展到div上，而不是“随身携带”。

我如何实现这一目标？我强烈怀疑它只能用JS来完成。
如果我确实需要在Jquery中执行此操作（在浏览器调整大小上） - 假设我在页面上有100张400px x 200px的图像，那么每次调整窗口大小时网站性能是否会受到严重影响？这被认为是不好的做法吗？

Answer 1

这就是我提出的：

$(window).resize(function () {
    $("div").css("width", ($("img").width() / $(window).width()) * 100 + "%");
});

由于CSS并不适合我，我使用JQuery来满足宽度变化。

Here is the JSFiddle demo

基本上CSS已经让图像按照比例调整大小。 JQuery代码获取img标记的百分比宽度，并将其设置为div宽度的百分比，使得容器在调整窗口大小时始终环绕图像。

Answer 2

我不确定你是否希望div在宽度上缩小，但是这里css是保持比率的。我相信这将在计算机上很好地扩展，可能不在移动设备上（对于100个图像）。也许可以考虑在滚动到达底部时（例如谷歌图片搜索）使其获取更多。

html, body {
height: 100%;
width: 100%;
}

div {
height: 60%;
display: inline-block;
border: 2px solid brown;
}

img {
max-height: 70%;
max-width: 100%;
width:auto:
display: block;
}

使包装器div围绕动态响应图像缩小

2 个答案: