跨浏览器调整图像大小答案

【问题标题】：image resizing across browsers跨浏览器调整图像大小
【发布时间】：2011-10-04 14:53:01
【问题描述】：

我是一名 CSS 新手，但我在网上搜索过，但找不到解决问题的方法。我不能公开发布我网站的链接，所以我复制了下面的相关代码。

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

问题出在标题图片上。该图像是网站横幅/徽标。但是，除了主页之外，我需要所有页面上的标题都很小。因此，在 gimp 中将其调整为较小的像素大小，并使用<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

【问题讨论】：

标签： css google-chrome safari internet-explorer-7

【解决方案1】：

不要对图像使用百分比，而是尝试使用精确的像素大小：

#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;}

【讨论】：

成功了！！！！我不知道该怎么感谢你才足够。我想我应该考虑过使用像素，但我只是没有意识到。我可能与这个网站争吵太久了！