У меня есть логотип и текст на странице, и мои предметы перемещаются влево, но это приводит к обрезанию нижней части логотипа. Минусовые поля и отступы не используются. Посмотрев с помощью XRAY и средства поиска стилей веб-разработчика, я вижу, что 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;
    }
}
0
Pierce McGeough 27 Янв 2014 в 15:02
Добавил. Кажется, проблема в FF. Даже добавление отступов к логотипу не помогает.
 – 
Pierce McGeough
27 Янв 2014 в 15:16
Похоже, проблема рендеринга, вызванная уменьшением масштаба
 – 
szajmon
27 Янв 2014 в 15:21
Есть ли способ исправить это? Или просто изменить размер изображения?
 – 
Pierce McGeough
27 Янв 2014 в 15:26

1 ответ

Лучший ответ

Попробуйте добавить это к вашему CSS:

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

(укажите реальную высоту вашего изображения или высоту, которую вы хотите отобразить)

1
AvGraph 27 Янв 2014 в 15:34