跨浏览器调整图片大小

我是一名CSS新手，但我已经在网上搜索，无法找到解决问题的解决方案。我无法公开发布链接到我的网站，所以我已经复制了下面的相关代码。跨浏览器调整图片大小

我在网站上工作，不能以任何方式更改HTML。它由链接到复杂数据库的PHP应用程序自动生成。但是，我可以上传图片以显示在标题中。 PHP程序自动生成HTML。

问题在于标题图像。该图像是一个网站横幅/标志。但是，我需要的头部在所有页面上都很小，但是在主页上。因此，将其大小设置为较小的像素大小，并将<body id="home">用作选择器来增加其大小。

我还在我的css代码中插入了调整大小算法以防止模糊性。我不认为重新调整大小的css对大小和位置的问题有任何影响，但我包括的代码在案例

标题在所有浏览器的辅助页面上工作得很好，但主页很糟糕Chrome浏览器，Safari和IE7遭到破坏。它在Firefox和IE8上效果很好。这是一个很奇怪的模式，我在网上找不到多少帮助。

在IE7中，图像位于正确的位置，并且清晰，但是应该是它的两倍。在safari和chrome中，图像向下移出标题div，覆盖其他内容，并且非常严重失真。

标题中还有一个搜索div，它工作正常。我使用CSS来将搜索div移出主页上的标题区域。我简化了相关的HTML，因为它工作正常，但我将它包含在内，因此您可以理解标题的完整div结构。

的HTML：

<body id="home"> 
<div id="wrap"> 
    <div id="header"> 
     <div class="center-div"> 

<div id="search-container"> 
    <form id="simple-search" action="/items/browse" method="get"> 
     <fieldset><input /><input/></fieldset></form> 
    <a href="/items/advanced-search">Advanced Search</a></div> 

<div id="site-title"> 
    <a href="http://sitename.org" ><img src="http://image_host.png" title="site name" /></a> 
      </div> 
     </div> 
    </div>

的CSS：

#home #site-title img{ 
width: 200%; 
height: 200%; 
image-rendering: optimizeSpeed; 
image-rendering: -moz-crisp-edges; 
image-rendering: -webkit-optimize-contrast; 
-ms-interpolation-mode:nearest-neighbor;} 

#home #header{ 
min-height: 130px;} 

div#header > div.center-div { 
position: relative;} 

#search-container, #search a{ 
    float: none; 
    text-align: center; 
    margin-bottom: 30px; 
    text-decoration: underline; 
    margin-top: 15px; 
    margin-left: 50%; 
    font-size: 1.5em;} 


#home #search-container, #home #search a{ 
width: 100%; 
height: 100%; 
margin-top: 360px; 
margin-left: -12px; 
font-size: 2em; 
    position: absolute;}

很抱歉的长篇大论后，但我在的帮助，而迫切需要的，我想确保我放弃一切相关信息。我真的不知道发生了什么。我为非营利组织工作，我的培训是在图书馆和档案馆，而不是网页设计。但是为了我们的项目能够正常工作，我现在在做CSS！

感谢您的任何建议，你可以给

恭 CAMC

来源

2011-07-13 christine

而不是使用百分比为图像，可尝试使用精确的像素尺寸：

#home #site-title img{ 
width: 200px; 
height: 200px; 
image-rendering: optimizeSpeed; 
image-rendering: -moz-crisp-edges; 
image-rendering: -webkit-optimize-contrast; 
-ms-interpolation-mode:nearest-neighbor;}

来源

2011-07-13 16:02:40 JaCraig

它的工作!!!!我不知道该怎么感谢你才足够。我想我应该考虑使用像素，但我只是没有意识到。我可能一直在与这个网站争斗太久！ – christine

跨浏览器调整图片大小

回答

相关问题