genericImage.css

.fill {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), inset 0 1px 3px 0 rgba(0,0,0,0.2);
  /* cursor: pointer; */
}
.fill img {
  flex-shrink: 0;
  width: 100%;
  /* height: 100%; */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

genericImage.html

<template>
    <!-- <template if:true={resourceImages}> -->
    <div style={parentDivStyle}>
        <div class="fill" style={currentStyle} onclick={handleImageClick}>
            <img src={imageSource} alt="Could be portrait or landscape" />
            <div class="centered" style={getChildStyle}>{imageText}</div>
        </div>
    </div>
    <!-- </template> -->
</template>

genericImage.js

/* eslint-disable getter-return */
/* eslint-disable consistent-return */
/* eslint-disable no-console */
import { LightningElement, track, api } from 'lwc';
import FORM_FACTOR from '@salesforce/client/formFactor';

export default class genericImage extends LightningElement {
    // @track imageSource;
    @api height;
    @api page;
    @api isPointer;
    @api whichAction;
    @api contentDocumentId;
    @api urlNow;
    @api imgURL;
    @track formFactor = FORM_FACTOR;
    @api imageText;
    @api imageTextColor;
    @api imageTextSize;
    @api imageTextFamily;
    @api imageTextFamilyWeight;
    @api showShadow;

    @api paddingLeft;
    @api paddingRight;
    @api paddingTop;
    @api paddingBottom;

    get imageSource() {
        return this.imgURL;
    }

    get currentStyle() {
        // let returnValue;
        console.log('formFactor ==', this.formFactor);
        let style = '';
        if (!this.showShadow) {
            style += 'box-shadow: none !important;';
        }
        if (this.formFactor === 'Large') {
            style += this.isPointer ? `height: ${this.height}px; cursor: pointer;` : `height: ${this.height}px;`;
            return style;
        }
        // return `background-image:url(${resourceImages} + /WM_Implanter_JPGs/Online_Training.jpg);`
    }

    get parentDivStyle() {
        return `padding-left:${this.paddingLeft}; padding-right:${this.paddingRight}; padding-top:${this.paddingTop};padding-bottom:${this.paddingBottom};`;
    }


    get getChildStyle() {
        let fontWeight = 400;
        if (this.imageTextFamilyWeight === 'Normal') {
            fontWeight = 400;
        } else if (this.imageTextFamilyWeight === 'Medium') {
            fontWeight = 500;
        } else if (this.imageTextFamilyWeight === 'Bold') {
            fontWeight = 700;
        }
        return `width: 100%; text-align: center; color:${this.imageTextColor}; font-size: ${this.imageTextSize}; font-family: ${this.imageTextFamily}; font-weight:${fontWeight}`;
    }

    handleImageClick(event) {
        if (this.whichAction === 'ExternalLink' && this.urlNow) {
            window.open(this.urlNow);
        } else if (this.whichAction === 'Download' && this.contentDocumentId) {
            window.open(window.location.origin + `/CommunityName/sfc/servlet.shepherd/document/download/${this.contentDocumentId}?operationContext=S1`);
        }
    }

}

genericImage.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="isPointer" type="Boolean" default="false" label="Is pointer to be shown on hovering over?"/>
            <property name="urlNow" type="String" label="Enter the URL to navigate"/>
            <property name="contentDocumentId" type="String" label="Enter the ContentDocumentId to download"/>
            <property name="whichAction" type="String" label="Which action is to be performed with onclick event?" datasource=",ExternalLink,Download"/>
            <property name="height" type="Integer" label="Height of this component:"/>
            <property name="imgURL" type="String" label="Image URL(Static Resource)"/>
            <property name="page" type="String" label="which image are you loading?" datasource=",EPRoundTable,ICRoundTable,MyDashboard,Technology,InServiceDeck,ImpProcedureVideo,OnlineTraining,ClinicalEvidence,TopBanner"/>
            <property name="imageText" type="String" label="Text on image:"/>
            <property name="imageTextColor" type="String" label="Text color on image:"/>
            <property name="imageTextSize" type="String" label="Text size on image:"/>
            <property name="imageTextFamily" type="String" label="Text family on image:"/>
            <property name="paddingLeft" type="String" label="Padding on left:"/>
            <property name="paddingRight" type="String" label="Padding on right:"/>
            <property name="paddingTop" type="String" label="Padding on top:"/>
            <property name="paddingBottom" type="String" label="Padding on bottom:"/>
            <property name="showShadow" type="Boolean" label="Shadow Around?" default="true"/>
            <property name="imageTextFamilyWeight" type="String" label="Text family font weight" datasource=",Normal,Medium,Bold"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>