跨瀏覽器調整圖片大小

我是一名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

跨瀏覽器調整圖片大小

回答

相關問題