Css 缩放及；裁剪图像并在顶部绘制svg正方形（角度）_Css_Angular_Svg

Css 缩放及；裁剪图像并在顶部绘制svg正方形（角度）

css angular svg

Css 缩放及；裁剪图像并在顶部绘制svg正方形（角度）,css,angular,svg,Css,Angular,Svg,“闪电战胜过千言万语”：基本上，我想做的是在图像中的某个位置上方绘制一个正方形（），并在放大/缩小和裁剪的同时动态调整该正方形以适应图像。stackblitz链接有3个视图，一个是普通图像的基本视图，一个是可缩放视图（我也使用了该视图），一个是可缩放时图像被“放大和裁剪”的视图-这就是我需要您帮助的地方我是否应该以某种方式使用对象拟合进行裁剪？如果我用画布来处理这个问题会更好吗？我已经做了一整天了，我觉得我的css知识太有限了，不可能做到这一点额外问题：如何让放大缩小按钮仅使用css fl

“闪电战胜过千言万语”：

基本上，我想做的是在图像中的某个位置上方绘制一个正方形（

），并在放大/缩小和裁剪的同时动态调整该正方形以适应图像。stackblitz链接有3个视图，一个是普通图像的基本视图，一个是可缩放视图（我也使用了该视图），一个是可缩放时图像被“放大和裁剪”的视图-这就是我需要您帮助的地方

我是否应该以某种方式使用对象拟合进行裁剪？如果我用画布来处理这个问题会更好吗？我已经做了一整天了，我觉得我的css知识太有限了，不可能做到这一点

额外问题：如何让放大缩小按钮仅使用css flex box为每行添加/删除一幅图像？（即：不是静态地在高度和宽度上添加x个像素，而是增加或减少每个图像的大小，以便移除或添加另一个图像（每行），同时始终填充所有可用空间）

提前谢谢你

我自己设法解决了。stackblitz更新了一个有效的解决方案