根据内容位置调整图像大小

Question

我有一个客户的要求很奇怪：

基本上，我有一个博客文章，该文章的开头有一个“元数据”框浮动在右侧。 因此，在帖子的开头，内容的宽度为300px，在框结束后，宽度为500px。 因此，内容像那个L形一样围绕那个盒子环绕/流动。

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

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

Answer 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");
    }
});

注意：我尚未测试此代码...