IE6 图像长宽比、CSS

发布于 2024-12-13 00:31:37 字数 563 浏览 0 评论 0原文

上有以下代码

所以我的 img 的width:100%; : height: auto;

然而,因遵守网络标准而臭名昭著的 IE6 似乎忽略了宽高比,它在图像上添加了默认的宽高比,使它们看起来很丑陋,在某些情况下它会拉伸它们并挤压它们正确加载它们,但不一致。

html 看起来像这样

<div 100% width of window>
     <div 100% with some margin>
          <img that looks great in IE (yeah right..) />
     </div>
</div>

应该为 1140px x 392px 的图像显示为 1140px x 1303px

宽度似乎是正确的,但高度正在扭曲。

你知道修复方法吗?

我知道 IE6 即将被淘汰,但对于世界上一些使用率超过 28% 的国家和企业来说,在某些情况下支持它仍然很重要。

So i have the following code on my img's

width:100%; height: auto;

However IE6 being infamous for conforming to web-standards seems to ignore the aspect ratio, it adds a default aspect ratio onto the image and makes them look hidious, it stretches them and squashes them in some instances it loads them correctly but it's not consistent.

The html looks like this

<div 100% width of window>
     <div 100% with some margin>
          <img that looks great in IE (yeah right..) />
     </div>
</div>

An image that is supposed to be 1140px by 392px is displayed at 1140px by 1303px

Width seems to be correct but the height is getting distorted.

Do you know of a fix?

I understand that IE6 is on the way-out but with some countries in the world with over 28% of usage and corporations it is still important to support it in some instances.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

潦草背影 2024-12-20 00:31:37
#yourImgage {
    width:100%; height: auto;
}

它会拉伸它们并在加载它们的某些情况下挤压它们
正确,但不一致。

上面的代码并不是告诉图像本身是 100%,而是容器宽度的 100%。如果这就是你想要的,那就好吧。否则,通过拉伸,听起来 IE 只是在做它被告知的事情,尽管它似乎对如何处理 height:auto 感到困惑...保留图像的纵横比或保持其原始像素高度,同时拉伸其宽度。

那么您是否尝试过完全忽略 height ?它在其他浏览器中的行为似乎是相同的,也许它会消除 IE 6 的混乱......

#yourImgage {
    width:100%;
}

你想在这里实现什么?


编辑:

也许您需要为 IE 6 维护一个条件样式表。所有其他浏览器都会忽略这一点。

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-only.css" />       
<![endif]-->
#yourImgage {
    width:100%; height: auto;
}

it stretches them and squashes them in some instances it loads them
correctly but it's not consistent.

Your code above is not telling the image to be 100% of itself, but rather 100% of it's container's width. If that's what you want, then fine. Otherwise, by stretching, it sounds like IE is just doing what it's told albeit that it seems to be confused about what to do with height:auto... preserve the image's aspect ratio or keep it's original pixel height while stretching its width.

So have you tried leaving out height entirely? It seems to behave the same in other browsers, perhaps it will eliminate IE 6's confusion...

#yourImgage {
    width:100%;
}

What are you trying to achieve here?


EDIT:

Perhaps you'll need to maintain a conditional stylesheet just for IE 6. All other browsers will ignore this.

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-only.css" />       
<![endif]-->
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文