0

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

<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">
4

1 回答 1

0

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

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

于 2013-07-28T17:44:17.813 回答