在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%;
}