CSS的三角框框是Web开发中常用的一种效果。这种效果可以用来突出某些内容，使页面更美观。当我们需要在三角框中加入图片时，可以使用下面的代码。

.container {
position: relative;
width: 300px;
height: 300px;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #000000;
}
.img-container {
position: absolute;
top: 5px;
left: 5px;
width: 290px;
height: 290px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}

以上代码中，我们使用了一个带有伪元素`before`的容器`container`来实现三角框框效果。我们使用了`border`属性来绘制三角形，其中`border-top`和`border-bottom`的值分别设为50px，可以通过调整这个值来调整三角形的大小。`border-right`的值设为了黑色`#000000`，可以根据需要进行更改。

为了让图片能够放入三角框中，我们使用了另一个容器`img-container`。这个容器使用了`position: absolute`来定位，`overflow: hidden`则是为了控制图片的显示。我们在这个容器中放置了一个`img`标签，使用`object-fit: cover`来让图片按比例缩放并填满容器。

有了以上的代码，我们就可以轻松地实现带有图片的三角框框效果了。在实际项目中，可以根据需要进行一些微调，达到更好的效果。