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>

代码：

* { 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

width尝试设置图像的和height值，而不是使用 CSS 进行格式化。在此之前删除 CSS 类。
像这样...

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

更改notetext {字体大小：0；行高：0；文本缩进：-4000px；显示：块；{字体大小：0；行高：0；文本缩进：-400px；显示：块；

ge{显示：块；行高：0；宽度：245px；高度：100px；浮动：左到ge{显示：块；行高：0；宽度：150px；高度：75px；向左飘浮

那真的是你可以做的唯一调整来改变尺寸。

对不起，如果我对你帮助不大。

于 2013-02-10T02:53:10.577 回答
0

http://jsfiddle.net/persianturtle/JhNmp/ - 已修复

使用此 CSS ID

#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 回答