Question

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

Answer 1

更改notext {font-size：0;行高：0; text-indent：-4000px;显示：块;到{font-size：0;行高：0; text-indent：-400px;显示：块;

ge {display：block; line-height：0;宽度：245px;身高：100px; float：left to ge {display：block; line-height：0;宽度：150px;身高：75px; float：left

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

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

Answer 2

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

<img src='css/images/reset.png' alt='Reset' title='Reset' width='53' height='49'></a>

Answer 3

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

伸展到不需要的大小的小图标

3 个答案: