Unable to view screen shot in Extent Report - selenium

Question

I am using POM with extent report and everything is working fine, also on clicking screen shot its opening in big size but as per the client requirement he need screen shot in bigger size without click on it. I got some suggestion from my senior he said like i need to remove the thumbnail so that it will appear in bigger size, no where i found this option.
<?xml version="1.0" encoding="UTF-8"?>
<extentreports>
<configuration>
<!-- report theme -->
<!-- standard, dark -->
<theme>dark</theme>
<!-- document encoding -->
<!-- defaults to UTF-8 -->
<encoding>UTF-8</encoding>
<!-- protocol for script and stylesheets -->
<!-- defaults to https -->
<protocol>https</protocol>
<!-- title of the document -->
<documentTitle>Dimension Data Automation Reports</documentTitle>
<!-- report name - displayed at top-nav -->
<reportName>Dimension Data - </reportName>
<!-- report headline - displayed at top-nav, after reportHeadline -->
<reportHeadline>Test Automation Report</reportHeadline>
<!-- global date format override -->
<!-- defaults to yyyy-MM-dd -->
<dateFormat>yyyy-MM-dd</dateFormat>
<!-- global time format override -->
<!-- defaults to HH:mm:ss -->
<timeFormat>HH:mm:ss</timeFormat>
<!-- custom javascript -->
<scripts>
<![CDATA[
$(document).ready(function() {
});
]]>
</scripts>
<!-- custom styles -->
<styles>
<![CDATA[
]]>
</styles>
</configuration>
</extentreports>
public class ExtentManager {
private static ExtentReports extent;
public static ExtentReports getInstance() {
if (extent == null) {
Date d = new Date();
//String fileName = d.toString().replace(":", "_").replace(" ", "_") + ".html";
String fileName="index"+".html";
String reportPath = Constants.REPORTS_PATH + fileName;
extent = new ExtentReports(reportPath, true, DisplayOrder.NEWEST_FIRST);
extent.loadConfig(new File(System.getProperty("user.dir") + "/config/ReportsConfig.xml"));
// optional
extent.addSystemInfo("Selenium Version", "2.53.0").addSystemInfo(
"Environment", Constants.ENV).addSystemInfo("Qa","Shiva");
}
return extent;
}
}

Answer 1

This can be done through javascript. Use the <scripts> tag to add the below script
$(document).ready(function() {
var imageElements = $('img.r-img');
for (var i=0; i<imageElements.length; i++) {
imageElements[i].setAttribute('style', 'width:25%;');
}
});
You can set the style for the screenshot (img elements) as per your need.