イメージはブラウザ間でリサイズされます

私はCSS初心者ですが、ウェブを精査して問題の解決策を見つけることができません。私は自分のサイトへのリンクを公開することはできませんので、以下の関連コードをコピーしました。イメージはブラウザ間でリサイズされます

私はサイトで作業しており、HTMLを変更することはできません。これは、複雑なデータベースにリンクするPHPアプリケーションによって自動的に生成されます。しかし、ヘッダーに表示する画像をアップロードすることはできます。 PHPプログラムは自動的にHTMLを生成します。

問題はヘッダーイメージにあります。画像はサイトバナー/ロゴです。しかし、ホームページ以外のすべてのページでヘッダーを小さくする必要があります。したがって、ピクセルサイズを小さくするためにgimpでサイズを変更し、サイズを大きくするセレクタとして<body id="home">を使用しました。

私はまた、ぼやけを防ぐために私のCSSコードでサイズ変更アルゴリズムを挿入しました。私はサイズ変更のCSSがサイズと位置の問題に何らかの影響を与えているとは思わないが、大文字小文字の場合にはコードを入れた

ヘッダーはすべてのブラウザのセカンダリページで正常に機能するが、 Chrome、Safari、IE7で壊れたFirefoxとIE8でうまくいきます。これは奇妙なパターンです、私は多くのオンラインヘルプを見つけることができません。

IE7では、画像は適切な場所にあり、はっきりしていますが、2倍の大きさです。サファリとクロムでは、画像はヘッダー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

代わりにパーセントを使用しての画像のために、正確なピクセルサイズを使用してみてくださいを与えることができます：

ITが働い

#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

イメージはブラウザ間でリサイズされます

答えて

関連する問題