Firefox和IE无法正确显示响应式图像

时间:2014-11-10 07:36:03

标签: css responsive-design

或者谁知道,也许是Chrome,Safari和Opera,它们都显示我想要的图像,这是错误的。

基本上我所拥有的是一个图像和一些相关的文本,当窗口很大时我想要在图像的一侧,而当它很小时,它在图像的下方。当窗口是中等宽度时,会出现问题。图像应缩小一点,以便为文本留出空间(就像在webkit / blink中一样)。无论如何,它可能最好在jsfiddle中展示:

我在那里包含了一些Javascript,我用来控制高度,如果图像高于窗口,但我猜jsfiddle没有更新window.height,那部分适用于所有浏览器,所以我没有打扰调试它。虽然我很好奇,如果有人有CSS /非JavaScript的解决方案。

我猜全屏javascript也无法在jsfiddle中运行,所以我只上传了all-in-one file here,其中一切正常(除了我正在撰写的问题。

.mediaFile { width:auto;}

改为......

.mediaFile { width:100%;}

我发现将.mediaFile宽度更改为“100%”会使Firefox在大多数情况下以正确的宽度显示图像,但会导致全屏和小高度窗口的其他问题,这使得它成为问题而不是解决方案。

0 个答案:

没有答案