вложенный родитель div перекрывает дочерний элемент при изменении размера окна

При изменении размера окна браузера элемент содержимого перекрывает элемент логотипа. есть ли решение для этого. Я хочу, чтобы размер логотипа изменялся при изменении размера окна.

@charset "utf-8";
/* CSS Document */

html, body {
    background-color:#ffffff;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

#content {
    height:74%;
    background-color:#7d6961;
    width:100%;
    position:relative;
    top: 10%;
}

#logo {
    background-image:url(logo.png);
    background-repeat:no-repeat;
    position:absolute;
    left: 9%;
    top: 5%;
    right: 2%;
    bottom: 21%;
    width: 77%;
    height: 65%;
}

html css resize overlapping
person Lex Lemmens    schedule 07.11.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны использовать обратный вызов изменения размера из объекта window-DOM.

$(window).resize(function () {
    var _width = $(window).width(),
        _height = $(window).height();

    console.log('width: ' + _width);
    console.log('height: ' + _height );
});​

Посмотрите этот jsfiddle для примера реализации (я поместил логотип в тег img, поэтому он всегда полностью виден): http://jsfiddle.net/qY3kM/

Динамическое изменение размера изображений исключительно с помощью css невозможно (на самом деле... возможно, с помощью css-выражений, но они уродливы и их вообще не следует использовать). Существуют также плагины jquery для динамического изменения размера, но я никогда не использовал их, поэтому не могу их рекомендовать.

person muetzenflo    schedule 07.11.2012
comment
пожалуйста. Один более или менее несвязанный момент с логотипами: я бы посоветовал всегда размещать логотипы компаний в виде тега ‹img›, чтобы они печатались. Логотипы, размещенные на странице с помощью фона css, в большинстве случаев не печатаются (по умолчанию большинство браузеров не печатают фоны css). - person muetzenflo; 08.11.2012