Question

这是我的代码：

<div class='my-posts-container' id='<%=postobj._id%>'>
        <%var menuid='menu'+postobj._id%>
        <%var imagesource='../'+postobj.blob.path%>
        <div class="my-posts-container-header">
             <%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%> 
        </div>
        <div class="menu hide" id="<%=menuid%>" >
            <ul >
                <li><button onclick="viewpost('<%=postobj._id%>')"  >view</button></li>
                <li><button onclick="removepost('<%=postobj._id%>')"  >remove</button></li>
                <!-- <li><button onclick="copypostlink('<%=postobj._id%>')"  >copy link</button></li>
                <li><button onclick="editthispost('<%=postobj._id%>')"  >edit</button></li> -->
            </ul>
        </div>
        <div class="post-image" >
            
                <img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">
    
        </div>
       
        <span>
            <%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>
        </span>
        <hr>
        <div class="caption"> 
            <%=postobj.caption%> 
        </div>

我想将图像尺寸保持为400px * 400px 但添加背景色.post_image div，基本上，我想基于image标签中的任何图像向背景添加渐变，诸如此类，

这样就可以实现整个400 X 400的尺寸，如果不能的话，您可以建议我其他选择，谢谢。

Answer 1

您可以使用CSS实现类似的目的

考虑使用此样式表

<style type="text/css">
  .blured {
    width:320px;
    height:320px;
    position: relative;
    overflow: hidden;
  }

  .blured .blur {
    height:70px;
    width:100%;
    position:absolute;
    filter: blur(7px);
  }

  .blured .top {
    top:0px;
    background: linear-gradient(#000000d9, #00000000)
  }

  .blured .bottom {
    bottom:0px;
    background: linear-gradient(#00000000, #000000d9)
  }
</style>

然后使用以下标记

<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
  <div class='blur top'></div>
  <div class='blur bottom'></div>
</div>

结果将是这样的：

您可以尝试使用linear-gradient颜色和blur()的值来获得接近您要求的输出。

参考：

Answer 2

您描述的效果实际上可以实现。您只需要在图像顶部堆叠较小尺寸的同一图像即可。然后可以将下面的图像模糊掉，并将覆盖400px x 400px区域的其余部分。

为此，您需要将position的{{1}}字段设置为div，并将两个图像的relative字段设置为absolute。我将位于顶部的图像的高度减小到200px，并保持图像宽度与下面的图像相同，以类似于问题图像的样式。使用filter: blur()来模糊较大的图像。模糊会柔化图像的边缘（删除clip属性，您就会知道）。使用clip属性使边缘看起来“酥脆”。

我使用了this张图片。运行下面的代码片段以查看其作用：

<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
    margin: auto;
    position: relative;
    width: 50%;
}
.outer {
    filter: blur(5px);
    position: absolute;
    z-index: -1;
    clip: rect(0,400px,400px,0);
    
}
.inner {
    position: absolute;
    top: 100px; 
}
</style>
<div class="container">
    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>

这回答了部分问题。现在，要根据尺寸自动放置图像，您可以使用JavaScript检索和更新图像尺寸：

var image = new Image();

image.onload = function() {
  var height = image.height;
  var width = image.width;

}

image.src = "<source>";

下面的图像将始终为400 x 400 px，如果图像小于400 x 400 px，则可以根据其实际检索的尺寸更新顶部图像的属性。否则，将其压缩到400 x 400 px，以覆盖下面的整个图像。

有没有一种方法可以自动向图像添加渐变？

2 个答案: