Question

我不确定如何对图像进行裁剪以及是否具有响应能力。到现在为止，我一直在使用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列在另一列下显示，并且图像占据了整行

它应该显示如下内容那就是它不起作用的地方。

它不会那样显示，甚至无法正确对齐

我一直在尝试使用svg，但是如果还有其他可以帮助使用的方法，那么我已经准备好采用这种方式。

请提供一些有关如何实现此目标的想法。

好的，这是当前情况的演示。 https://codesandbox.io/s/vq4wx2y367 在情况1中，当2列并排显示时，该图像看起来不像我上面针对该情况显示的那样。这是一个非常小的图像，我想触摸div的底部和右侧。

在情况2中，它看起来像那样，但是并没有占用该div中的整个空间。在这种情况下，它应该触摸左右边框以及触摸div的底部。

Answer 1

我不知道这是否涵盖了您需要的所有方面，但是我可能只是将图像包装在容器中并用溢出对其进行裁剪。您可以尝试一下，直到适合您的布局为止：

.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>

如何裁剪图像并使其具有响应性？

1 个答案: