2

小さな53x49の画像アイコンが巨大なサイズに引き伸ばされるという問題があります。

これ： http： //imageshack.us/photo/my-images/837/arrowsj.png/

このサイズになるはずです：http： //imageshack.us/photo/my-images/32/resetw.png/

誰かがこれが起こる原因を知っていますか？またはそれを防ぐために取り出すために何を探すべきですか？または、それを修正するために何を入力しますか？

試してみました：背景画像を使用し、divを使用します。

ありがとう！

画像コード：

<a href='getestimate.php'><img id='fixed' src='css/images/reset.png' alt='Reset' title='Reset'></a>

CSSコード：

* { padding:0; margin:0; outline:0; }
body {
background:#fff;
font-family: Arial, sans-serif;
font-size:12px;
line-height:18px;
color:#6d6d6d;
}
input, textarea, select { font-family: Arial, sans-serif; font-size:12px;color:#6d6d6d;     }

a img { border:0; display: block;}

a { color:#0184c4; text-decoration: underline; cursor:pointer; }
a:hover { color:#1c6183; text-decoration: none; }
#fixed {width:53px; height:49px;}

.notext { font-size:0; line-height:0; text-indent: -4000px; display:block; }

.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

h2 { font-size:23px; line-height:26px; color:#0188c9; }
h3 { font-size:16px; line-height:20px; color:#000; }

h2, h3 { font-family: "Trebuchet MS", Arial, sans-serif;}

h1#logo { font-size:0; line-height:0; width:245px; height:74px; float:left; }
h1#logo a{ display:block; height:74px; text-indent: -4000px;     background:url(images/logo.gif); }

.shell { width:980px; margin:0 auto; }

#header { height:74px; background:url(images/header.gif);}

#navigation { float:right; height:30px;}
#navigation ul{ float:left; height:30px; list-style-type:none; padding-top:27px;}
#navigation ul li{ float:left; display:inline; margin-left:10px;}
#navigation ul li a{ float:left; width:110px; height:30px; text-align: center; background:url(images/nav.gif) no-repeat 0 0; line-height:30px; text-decoration: none; color:#7b7b7b; }

#navigation ul li a:hover,
#navigation ul li a.active { background-position:right 0; color:#fff;}

#slider { height:390px; background:url(images/slider.gif);}


.slider-holder { height:390px; position:relative; overflow:hidden; z-index:100}
.slides { width:894px; height:315px; position:relative; overflow:hidden; top:59px; left:43px;}
.slides .jcarousel-clip{ width:894px; height:315px; position:relative; overflow:hidden; }
.slides ul{ width:758px; height:315px; position:relative; overflow:hidden; list-style-type: none;}
.slides ul li{ float:left; display:inline; width:758px; height:315px; position:relative; overflow:hidden; margin:0 0 0 136px; left:-68px;}


.slide-shadow { position:absolute; bottom:0; height:26px; width:771px; background:url(images/slide-shadow.png); left:-6px;}
.slide-bg { width:758px; height:267px; position:relative; overflow:hidden; background:url(images/slide-bg.gif); padding:5px; }
.slide-image{ float:left; width:271px; }
.slide-info{ float:left; width:440px; padding:30px 0 0 15px; }
.slide-info p{ padding:13px 0 20px;}

.slider-nav { font-size:0; line-height:0; }
.slider-nav a{ width:43px; height:46px; text-indent: -4000px; position:absolute; top:165px; }
.slider-nav a.prev{ left:0; background:url(images/prev.gif); }
.slider-nav a.next{ left:937px; background:url(images/next.gif); }

.learn-button { width:165px; height:37px; background:url(images/learn-button.gif); }

#main { width:100%; background:url(images/main.gif) repeat-x 0 0; padding:45px 0 40px 0;}

.col { float:left; display:inline; width:280px; margin-right:70px; padding:10px 0;}
.col-last { margin-right:0;}

.col h3 { padding-bottom:12px; }
.col p { padding-bottom:12px; }

.three-cols { background:url(images/three-cols.gif) repeat-y center 0; width:100%;}

.ico { background-repeat:no-repeat; background-position:0 1px; padding-left:26px; }
.ico1 { background-image:url(images/ico1.gif)}
.ico2 { background-image:url(images/ico2.gif)}
.ico3 { background-image:url(images/ico3.gif)}

p.more { font-size:11px; }
p.more a{ background:url(images/more.gif) no-repeat 0 center; padding-left:11px;}

#footer { height:57px; background:url(images/footer.gif); line-height:56px; white-space:nowrap; color:#5c5c5c;}
#footer span{ color:#cfcfcf; padding:0 5px;}
#footer a{ color:#5c5c5c; text-decoration: none;}
#footer a:hover{ color:#0184c4;}
4

3 に答える 3

1

notext {font-size：0;を変更します。line-height：0; テキストインデント：-4000px; 表示ブロック; to {font-size：0; line-height：0; テキストインデント：-400px; 表示ブロック;

ge {display：block; 行の高さ：0; 幅：245px; 高さ：100px; float：左からge {display：block; 行の高さ：0; 幅：150px; 高さ：75px; フロート：左

サイズを小さくするためにできる調整はこれだけです。

あまり役に立たない場合は申し訳ありません。

于 2013-02-10T02:53:10.577 に答える
1

CSSでフォーマットするのではなく、画像のwidthとheight値を設定してみてください。その前にCSSクラスを削除してください。
このような...

<img src='css/images/reset.png' alt='Reset' title='Reset' width='53' height='49'></a>
于 2013-02-10T03:33:30.903 に答える
0

http://jsfiddle.net/persianturtle/JhNmp/- 修正済み

このCSSIDを使用する

#fixed {
    width:53px; 
    height:49px;
}

そして、次のようにHTMLにIDを含めます。

<img id="fixed"  etc etc etc>

特異性を追加するには、これを試してください。

 <div id="derp">
     <img id="fixed"  etc etc etc>
 </div>

およびCSS：

#derp #fixed {
    width:53px; 
    height:49px;
}
于 2013-02-10T02:51:35.947 に答える