根据内容中的位置调整图像大小答案

【问题标题】：Resize image based on placement in content根据内容中的位置调整图像大小
【发布时间】：2012-06-22 06:43:55
【问题描述】：

我有一个来自客户的非常奇怪的要求：

基本上我有一篇博客文章，在文章的开头有一个浮动到右侧的“元数据”框。所以在文章的开头，内容的宽度是 300px，框结束后，宽度是 500px。所以内容围绕那个盒子包裹/流动，就像一个 L 形。

客户希望如果将图片插入到帖子中，如果它在框下方，则为 100% 宽度（500 像素），如果在框旁边，则应为 300 像素宽。自动地。他们不想自己调整图像大小。

我无法在后端 (PHP) 中执行此操作，是否可以在 CSS /JS 中执行此操作？这里棘手的部分是我不知道图像在内容中的位置 - 它可以是内容中的第一个元素，它可以在中间，最后，无论在哪里......

【问题讨论】：

标签： javascript css image css-float

【解决方案1】：

不确定我是否足够了解上下文，但这可能会让您朝着正确的方向前进......

var offsetOfBottomOfBox = 700; //you would figure this out a different way

$("#contentDiv img").each(function(idx,el){
    //get image position in document
    var y = $(this).offset().top;

    if(y < offsetOfBottomOfBox) {
        $(this).css("width","300px");
    }
});

注意：我没有测试过这段代码...

【讨论】：

谢谢，我也在想同样的方向。猜猜这是要走的路，尽管它有其局限性（难以普及）。