调整图像大小基于内容

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

注：我没有测试此代码...