In extent-report version - 4.0.3.0 , screenshot size is displayed small while logging message with screenshot for test step in report

Question

I am generating extent report of version 4.0.3.0 , in which i am logging test step in report with pass/fail message with screenshot. After report is generated, for respective test step --> screenshot image is displayed small which is not visible properly. ChromeBrower : screenshot is displayed in small size. IEBrowser : screenshot is not displayed for test step.

Please help me with the solution to resize screenshot size in report and make screenshot visible in IE browser.

Below is the code used :

public class MerlinBase : Base
    {
        #region Variables

        public string commonDirectoryPath = AppDomain.CurrentDomain.BaseDirectory;
        public string applicationConfigurationPath = AppDomain.CurrentDomain.BaseDirectory + "\\TestData\\ApplicationConfigurations.xlsx";
        public static ExtentReports extentReports;
        public static ExtentTest extentTest;

        #endregion Variables

        #region Methods

        /// <summary>
        /// This method runs before start of each test 
        /// </summary>
        [SetUp]
        public void TestInitialize()
        {
            DataTable appDetails = ExcelUtilities.ReadExcel(applicationConfigurationPath, "ApplicationDetails");
            string browserType = appDetails.Rows[0]["Browser"].ToString().Trim();
            string appURL = appDetails.Rows[0]["URL"].ToString().Trim();

            BrowserHandler.LaunchBrowser(browserType, commonDirectoryPath);
            BrowserHandler.DeleteCookies();
            BrowserHandler.NavigateToUrl(appURL); 
            BrowserHandler.MaximizeWindow();

            string TestCaseName = TestContext.CurrentContext.Test.MethodName;
            childDirectoryInfo.CreateSubdirectory(TestCaseName);

            extentReports = new ExtentReports();
            extentTest = extentReports.CreateTest(TestCaseName);
            string pathToSaveExtentReport = reportParentFolderPath + "\\" + reportChildFolderPath;
            ExtentHtmlReporter htmlReporter = new ExtentHtmlReporter(pathToSaveExtentReport +"\\"+"AutomationReport"+".html");

            extentReports.AttachReporter(htmlReporter);


        }

public static class ExtentReporting
    {
        static string Screenshot = null;
        public static void Success(this ExtentTest Test, string PassDetails, MediaEntityModelProvider provider = null)
        {
            try
            {
                Screenshot = TakeScreenshot.ScreenshotOfTestStep();
                if (Screenshot != null)
                {
                   var m = MediaEntityBuilder.CreateScreenCaptureFromPath(Screenshot).Build();
                    Test.Pass(PassDetails , m);
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    }

Answer 1

I was facing this issue as was opening Extent report on IE browser, So this issue exist for IE browser. But when opened in chrome size was small, but updated resolution.

htmlReporter.Config.CSS = ".r-img { width: 30%; }";