Изображение не будет отображаться полностью

Ниже приведен шаблон CSS, который я использую для своего сайта. У меня просто проблема, когда я пытаюсь добавить свой логотип в свой div #title, только половина изображения отображается (высота). Я думаю, что есть проблема с моими полями, но я не могу понять, почему изображение не отображает полную высоту (ширина кажется окей) независимо от того, как я изменяю ее размер или изменяю размеры полей.Изображение не будет отображаться полностью

Не могли бы вы предложить решение?

html { 
    overflow: hidden; 
    height: 99%; 
} 

body { 
    background: $ffffff; 
    height: 99%; 
    margin: 0; 
    padding: 0; 
    line-height: 150%; 
    text-align: center; 
} 

* { 
    font-size: 8pt; 
    font-family: Tahoma, Verdana, sans-serif; 
    color: #000000; 
    text-align: left; 
} 

/* === Containers === */ 

#mainContentArea { 
    margin: 0 auto 0 auto; 
    display: table; 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
    width: 600px; 
} 

.link,.linkActive { 
    width:75px; 
    margin-right:10px; 
    float: left; 
    margin-top:24px; 
    text-align:center; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    background-image:url(tab.gif); 
    position:relative; bottom:0px; 
} 

.link:hover { background-image:url(tab2.gif); } 

a { text-decoration:none; } 

.link a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
} 

#linkGroup { 
    margin-right:10px; 
    height:40px; 
    width:600px; 
} 

#title { 
    width:230px; 
    height:40px; 
    margin-right:20px; 
    margin-top:15px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:20px; 
    font-weight:bold; 
    text-align:center; 
    float:left; 
} 

.contentTitle { 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#213E74; 
    font-size:19px; 
    margin-left:15px; 
    margin-right:12px; 
    margin-bottom:12px; 
    width:573px; 
} 

.pageContent { 
    font-family: Arial, Helvetica, sans-serif; 
    color:#000000; 
    font-size:12px; 
    margin-left:20px; 
    margin-right:20px; 
    width:560px; 
} 


#blueBox { 
    position: absolute; 
    vertical-align: middle; 
    background-color:#E7EDF8; 
    width:600px; 
    clear:both; 
} 

#header { 
    width:600px; 
    height:20px; 
    background-color:#FFFFFF; 
    background-image:url(header.gif); 
    background-repeat:no-repeat; 
} 

#footer { 
    width:600px; 
    height:20px; 
    background-color:#FFFFFF; 
    background-image:url(footer.gif); 
    background-repeat:no-repeat; 
    text-align:center; 
    padding-right:10px; 
    color:#BDCDEC; 
} 

#footer a { 
    font-size:9px; 
    color:#BDCDEC; 
} 

#contentBox { margin-top:25px; } 

html, body { text-align: center; } 

p {text-align: left;}

источник

2012-05-24 user1413830

Насколько велика изображение? Если его высота больше, чем 40 пикселей, ваше правило 'height' отключит его. –

Даже когда я устанавливаю изображение на 40 пикселей, он по-прежнему отключается наполовину, Ive пробовал редактировать правило высоты и ничего – user1413830

Это может быть случай, когда нам нужно увидеть больше. Можете ли вы опубликовать URL-адрес, где мы можем увидеть его в действии? –

Удаление margin-top: 15px; из #title работал для меня.

источник

2012-05-24 00:32:37

awesome thank you! – user1413830

-1

удалить

width:230px; 
    height:40px;

из CSS и держать

<img src="image " width="" height=""></img>

источник

2012-05-24 08:00:15 qwerty

Изображение не будет отображаться полностью

ответ

Смежные вопросы