[英]Zoomed image in IE11 but displays fine in Chrome/Firefox
Created a contents page on an intranet site using widgets to display the source code. 使用小部件在Intranet站点上创建了内容页面以显示源代码。 The image seems to appear fine in Chrome and Firefox but when in IE the image appears stretched/zoomed. 该图像似乎在Chrome和Firefox中看起来不错,但是在IE中时,该图像显示为拉伸/缩放。 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. 我知道这不是拥有HTML和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>
try to add a width to your image, (100% of it's container) 尝试为图像添加宽度,(占容器的100%)
.image > img {
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.