CSS正在裁剪我的圖像底部

我在頁面上有一個徽標和文本，我的項目左側浮動，但這會導致徽標底部切斷。不使用減頁邊距或填充。看着XRAY和webdeveloper風格的發現者，我發現img正在縮短，周圍沒有其他元素，（它只是向左漂移）。如果我從.logo去除浮動圖像出現整體，而是更大了posistion的CSS正在裁剪我的圖像底部

這裏是的jsfiddle http://jsfiddle.net/9LGRx/這似乎是一個錯誤的FF，在Chrome工程確定和Safari

html > body > header > div.wrapper > a.logo > img

HTML代碼

<header> 
    <div class="wrapper"> 
     <a href="/" class="logo"> 
      <img src="images/logo.png" alt="Showhouse logo"> 
     </a> 
     <h1>Welcome to ShowHouse</h1> 
     <p class="text"> 
      Show off your property management skills with ShowHouse - the only online property 
      management software that will effortlessly handle and help to improve every aspect of 
      your <strong>residential</strong> and <strong>commercial lettings</strong>, <strong>sales</strong> and <strong>block management</strong>. 
     </p> 
    </div> 
</header>

SCSS代碼

h1{ 
    color: #fff; 
    float: left; 
    clear: both; 
} 

img{ 
    max-width: 100%; 
    float: left; 
} 
header{ 
    background-image: url('../images/header-bg.jpg'); 
    float: left; 
    width: 100%; 
    /*height: 417px;*/ 
    .logo{ 
     float: left; 
     width: 60%; 
     margin: 20px 0 20px 0; 
    } 
    .logo img{ 
     max-width: 100%; 
    } 
    .text{ 
     float: left; 
     clear: both; 
     color: $color-white; 
     font-size: 1.2em; 
     margin-top: -10px; 
    } 
}

來源

2014-01-27 Pierce McGeough

花花公子的jsfiddle ???? Plz –

已添加。似乎是一個FF問題。即使將徽標添加到徽標也無助於 –

似乎是由縮小造成的渲染問題 – szajmon

嘗試增加這你的CSS：

.logo img{ 
    max-width: 100%; 
    display: block; 
    height: 150px; 
}

（把你的圖像的真實高度或你想要顯示的高度）

來源

2014-01-27 11:34:24 AvGraph

是增加一個高度的作品 –

CSS正在裁剪我的圖像底部

回答

相關問題