我不确定如何进行图像裁剪以及是否具有响应能力。
到现在为止,我一直在像这样使用svg,它确实可以工作,但是没有响应。
好的,这是当前情况的演示。
https://codesandbox.io/s/vq4wx2y367
这是代码
<img src={require('./assets/fans.jpg')} alt='projectvoice' className='fans' />
<svg width="0" height="0">
<defs>
<clipPath id="myClip">
<path d="M-20,150 a1,1 0 0,1 100,0" fill="blue" />
<path d="M50,150 a5,5 0 0,1 210,0" fill="red" />
</clipPath>
</defs>
</svg>
我也尝试过使用这样的circle命令
<img src="http://maddesigns.de/SVG/clip-path-test_files/clouds.jpg" />
<svg width="0" height="0">
<defs>
<clipPath id="myClip">
<circle cx="160" cy="280" r="180" />
<circle cx="325" cy="280" r="275" />
</clipPath>
</defs>
</svg>
我在这里使用的布局是屏幕较大时(例如在笔记本电脑上),然后2列并排出现。
右侧栏有这样的图像
但是当它在移动设备上显示时,有2列在另一列下显示,并且图像占据了整行
它应该显示这样的东西
那就是它不起作用的地方。
它不会像那样显示,甚至无法正确对齐
我一直在尝试使用svg,但是如果还有其他可以帮助解决的问题,那么我已经准备好采用这种方法。
请提供一些有关如何实现此目标的想法。
好的,这是当前情况的演示。
https://codesandbox.io/s/vq4wx2y367
在情况1中,当2列并排放置时,该图像看起来不像我上面针对该情况显示的那样。
这是一个非常小的图像,我想触摸div的底部和右侧。
在情况2中,它看起来像那样,但是并没有占用该div中的整个空间。在这种情况下,它应该触摸左右边框,也应该触摸div的底部。
最佳答案
我不知道这是否涵盖了您需要的所有方面,但是我可能只是将图像包装在容器中,并用溢出对其进行剪辑。您可以尝试一下,直到适合您的布局为止:
.img-clip {
overflow: hidden;
}
.img-clip img {
min-height: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.img-clip {
width: 50%;
}
.img-clip img {
padding-left: 50%;
}
}
<div class="img-clip">
<img src="https://i.stack.imgur.com/xe7zl.png" alt='projectvoice' className='fans' />
</div>