javascript - 使包装器 div 围绕动态响应图像收缩

Question

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

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

• 尺寸未知
• 高度应为 wrapper 的 70%，但宽度可以是任意大小，具体取决于尺寸比例。
• 应该在窗口大小时保持尺寸比例(目前只在放大时保持尺寸比例)

JSFiddle:http://jsfiddle.net/8c15uw1d/

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

奇怪的是，在 IE9 中，这会按要求工作，但在 Chrome 中，图像会在 div 上放大，不会“随身携带”。

1. 我该如何实现？我强烈怀疑这只能用 JS 来完成。

2. 如果我确实需要在 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 宽度的百分比，导致容器在调整窗口大小时始终环绕图像。