Question

我在页面上有一个徽标和文字，我的项目向左浮动，但这会导致徽标的底部被切断。没有使用减去边距或填充。使用XRAY和webdeveloper样式查找器，我看到img正在缩短，周围没有其他元素，（它只是向左浮动）。如果我从.logo中移除浮动图像，则图像显示为整体，但更大且不在位置

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

Answer 1

尝试将此添加到您的css：

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

（放置图像的实际高度或要显示的高度）

CSS正在裁剪我的图像底部

1 个答案: