在IE11中缩放图像，但在Chrome / Firefox中显示正常

Question

使用小部件在Intranet站点上创建了内容页面以显示源代码。 该图像似乎在Chrome和Firefox中看起来不错，但是在IE中时，该图像显示为拉伸/缩放。 我不确定如何解决这个问题，请有人帮忙？

我知道这不是拥有HTML和CSS的正确方法。 但是对于此特定问题，使用这种方式可以在（运行代码片段）中正确查看代码。

源代码如下：

<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

尝试为图像添加宽度，（占容器的100％）

.image > img {
    width: 100%;
}