时间戳

首页 > 解决方案 > How to cut image overflow div using react

html - How to cut image overflow div using react

问题描述

Want to get Image

I capture Image using react-webcam. And captured Image overflow <div>. So, I want to get image only inside <div>.

If, I use hidden It just hide, not drop(or crop).

So, I want to know how to delete outside image.

Capture Image

<CustomWebCam    
          onLoadedData={() => {
            setTimeout(() => setError(false), 500);

            setLoading(false);
          }}
          audio={false}
          ref={webcamRef}
          screenshotFormat="image/jpeg"
          screenshotQuality="1.0"
          forceScreenshotSourceSize
          videoConstraints={videoConstraints}
          onUserMediaError={() => {
            alert('Error');
          }}
          muted
        />

I want to use only inside div image in here

          <ReactImageCrop
            width={windowDimensions.width * 0.7}
            height={windowDimensions.height * 0.7 * 0.5}
            imageData={imgSrc}
          />

标签： htmlcssreactjsimageoverflow

解决方案

试试这个：

.img {
  width:460px;
  overflow:hidden;
}

<div class="img">
 <img src="https://i.stack.imgur.com/8NrcV.png">
</div>

推荐阅读