0

经过无数次的查找，我仍然无法得到一个确定的答案。

我需要一个 div 来包裹响应式图像，但是图像

  • 尺寸未知
  • 应该有包装器的 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 个 400 像素 x 200 像素的图像，每次调整窗口大小时网站性能会显着降低吗？这被认为是不好的做法吗？

4

2 回答 2

2

这就是我想出的：

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

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

这是JSFiddle演示

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

于 2015-07-20T07:39:09.160 回答
1

我不确定您是否希望 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;
}
于 2015-07-20T07:06:49.200 回答