Zoomed image in IE11 but displays fine in Chrome/Firefox

Question

Created a contents page on an intranet site using widgets to display the source code. The image seems to appear fine in Chrome and Firefox but when in IE the image appears stretched/zoomed. I'm not sure how to correct this could, someone please help?

I know this is not the correct way to have HTML and CSS. But for this particular issue, having it this way you are able to view the code properly in the(Run Code Snippet).

Source Code below:

<style type="text/css">body {
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial,sans-serif;}

div.image{
 float:left;  /* important */
 position:relative; /* important(so we can absolutely position the description div */}

div.description{
 position:absolute; /* absolute position (so we can position it where we want)*/
 bottom:-120px; /* position will be on bottom */
 left:0px;
 width:100%;

/* styling bellow */
 background-color:black;
 color:white;
 opacity:0.4; /* transparency */
 filter:alpha(opacity=60); /* IE transparency */   }

p.description_content{
 padding:10px;
 margin:0px;
 font-size: 17px;}

</style>

<div class="image"><!-- image --><img src="http://mresult.com/wp-content/uploads/2017/04/CRMBanner.png" /> <!-- description div -->

<div class="description">
<p class="description_content">Whilst the CRM project develops we will be filling this area with updates and information to educate the business.</p>
<p class="description_content">Keep an eye out for the fortnightly updates that are sent out on the Colin homepage and also through Connections.</p>
</div>
<!-- end description div --></div>

Answer 1

try to add a width to your image, (100% of it's container)

.image > img {
    width: 100%;
}