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

Question

查了无数遍，还是得不到确切的答案。

我需要 div 来包裹响应式图片，但是图片

尺寸未知
高度应为 wrapper 的 70%，但宽度可以任意，根据尺寸比例。
在window放大和缩小时应该保持尺寸比例（目前只在放大时保持尺寸比例）

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

奇怪的是，在 IE9 中，这可以按要求工作，但在 Chrome 中，图像会在 div 上放大，'take it along' 不会。

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

Answer 1

我不确定您是否希望 div 缩小宽度，但这里 css 是为了保持比例不变。我相信这会在计算机上很好地扩展，也许不会在移动设备上（对于 100 张图像）。也许考虑在滚动到达底部时获取更多内容（例如 google 图片搜索）。

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;
}

Answer 2

这是我想出的：

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

由于 CSS 对我来说效果不佳，我使用 JQuery 来适应宽度变化。

Here is the JSFiddle demo

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

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

Make wrapper div shrink around dynamic, responsive image

html

javascript

css

jquery

shrinkwrap