Question

我正在创建一个网站，其中包含以下代码。

<style>
.browser_logo{
width:100%;
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">

图像宽度约为1000像素，这是极端但需要的。问题是Safari中的宽度仅为52px。它可以在Chrome，Firefox，Opera甚至IE中正确显示。我整个晚上一直在寻找Safari黑客攻击，但我发现的一切也改变了Chrome浏览器的输出。当我删除100％的宽度或基本上是样式部分时，它会在safari中显示整个图像。但随后它将不再响应。任何帮助将不胜感激。

我在上面的样式部分添加了以下内容。这使它工作，但它是一个丑陋的黑客，所以我仍然想知道如何正确地做到这一点。

这是新代码。我使用了http://www.websitedimensions.com/

中的屏幕尺寸

<style>
@media screen and (min-width:310px) {.browser_logo{min-width:310px;}}
@media screen and (min-width:468px) {.browser_logo{min-width:468px;}}
@media screen and (min-width:750px) {.browser_logo{min-width:750px;}}
@media screen and (min-width:989px) {.browser_logo{min-width:989px;}}
@media screen and (min-width:1010px) {.browser_logo{min-width:1010px;}}
@media screen and (min-width:1117px) {.browser_logo{min-width:1117px;}}
@media screen and (min-width:1245px) {.browser_logo{min-width:1245px;}}
@media screen and (min-width:1405px) {.browser_logo{min-width:1405px;}}
@media screen and (min-width:1645px) {.browser_logo{min-width:1645px;}}
@media screen and (min-width:1885px) {.browser_logo{min-width:1885px;}}
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">

Answer 1

为什么不设置.browser_logo { width:100%; }而不是使用所有这些媒体查询？

如果你把它放在一个jsfiddle中，或者向我们展示实时链接，也许更容易理解你想要做什么？

仅在野生动物园上展示徽标

1 个答案: