En una página de carga de imágenes tengo una vista previa de la imagen. Me gustaría crear una superposición que muestre la imagen en un rectángulo en el medio, con una superposición opaca alrededor del exterior del rectángulo.

Similar a ésto:

Puedo crear una superposición div, pero necesito invertir el fondo negro opaco para que esté en el resto de la imagen pero no en el rectángulo. De esta manera, puedo obtener una vista previa para el usuario de cómo se verá el producto final.

Esto es lo que tengo:

 .wrapper { position: relative; height: fit-content; width: fit-content; display: flex; } .overlay { max-width: 100%; height: 100%; aspect-ratio: 1 / 1.42; background-color: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 150px; border-radius: 0.5rem; }

 <div class="wrapper"> <img src="https://picsum.photos/500/300"/> <div class="overlay"></div> </div>

Requisitos

1. Necesito mantener constantes la relación de aspecto y el tamaño relativo del rectángulo.
2. Sin números mágicos o ancho/alto fijo a menos que se calculen dinámicamente por imagen, estas imágenes tendrán cualquier tamaño o dimensión y el diseño debe responder a (casi) cualquier tamaño de pantalla.
3. No puedo cambiar demasiado el marcado porque estoy trabajando con la API de arrastrar y soltar para mover el rectángulo dentro del envoltorio de la imagen cambiando sus posiciones izquierda y superior.
4. Me gustaría usar CSS o Javascript para resolver esto, no más HTML
5. No busco usar object-fit: cover ya que necesito que toda la imagen sea visible en sus dimensiones nativas.