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

Resize image based on placement in content

本文关键字：调整 图像 位置      更新时间：2023-09-26

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

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

客户希望，如果将

图像插入帖子中，如果它在框下方，则为100%宽度（500px），如果位于框旁边，则宽度应为300px。自然而然。他们不想自己调整图像大小。

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

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

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

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

相关文章：