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

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

1 个答案: