import * as React from 'react' ; import { HighlightColor } from "polar-shared/src/metadata/IBaseHighlight" ; import { deepMemo } from '../react/ReactUtils' ; interface IProps { readonly id : string ; readonly src : string ; readonly height : number ; readonly color ? : HighlightColor ; readonly style ? : React . CSSProperties ; } /**
 * Shows a and image and re-sizes it to its parent properly.
 */ export const HeightFitImg = deepMemo ( function HeightFitImg ( props ) { const { src , height , id , color } = props ; return ( < img className = "area-highlight m-1" data - annotation - id = { id } data - annotation - color = { color } style = { { objectFit : 'contain' , objectPosition : '50% top' , maxHeight : height , ... props . style } } draggable = { false } alt = "screenshot" src = { src } / > ) ; } ) ;