使用SCSS为容器实现图片裁剪视觉效果

实现代码 #

React 组件

import React from 'react';
import './ModalImage.scss';

const ModalImage = ({ imageUrl }) => {
  return (
    <div className="modal">
      <div className="viewport">
        <img src={imageUrl} alt="Preview" className="modal-image" />
      </div>
    </div>
  );
};

export default ModalImage;

SCSS 样式

/* 模态框容器：确保能容纳溢出的图片 */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible; /* 允许内容溢出显示 */
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* 200x100的显示窗口 */
.viewport {
  width: 200px;
  height: 100px;
  position: relative;
  overflow: visible; /* 允许图片超出窗口 */
}

/* 图片样式：确保尺寸超过显示窗口 */
.modal-image {
  display: block;
  width: 400px; /* 示例宽度，可根据实际图片调整 */
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 图片居中对齐显示窗口 */
}

/* 遮罩层：通过clip-path挖洞，仅显示窗口内的图片 */
.modal::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7); /* 半透明白色遮罩，可调整透明度 */
  z-index: -1; /* 遮罩层置于图片下方，不遮挡窗口内的图片 */
  /* 裁剪出显示窗口大小的透明区域 */
  clip-path: polygon(
    0 0,
    0 100%,
    calc(50% - 100px) 100%,
    calc(50% - 100px) calc(50% + 50px),
    calc(50% + 100px) calc(50% + 50px),
    calc(50% + 100px) calc(50% - 50px),
    calc(50% - 100px) calc(50% - 50px),
    calc(50% - 100px) 0,
    100% 0,
    100% 100%
  );
}

关键实现说明 #

• 需求1：模态框容纳所有内容：给.modal设置overflow: visible，避免图片溢出部分被模态框裁剪，确保完整显示。
• 需求2：固定尺寸显示窗口：.viewport直接设置width: 200px; height: 100px;，作为视觉上的显示区域，图片居中对齐该窗口。
• 需求3：溢出部分遮罩：利用clip-path属性在模态框的伪元素上创建一个中间镂空的遮罩，镂空区域大小与显示窗口一致，仅窗口内的图片无遮罩（完全显示），溢出部分被半透明遮罩覆盖，模拟裁剪后的视觉效果。

内容的提问来源于stack exchange，提问作者Yehuda