0

以下のコードのように、体の外側にレスポンシブ画像があります。それは画面の上半分を埋め、応答性が高く、これは素晴らしいことですが、サイズを変更しても下にあるすべてのコンテンツを画像の下にとどめておきたいのですが、何も機能していません。 . 私が試すことができるアイデアや代替方法はありますか?

HTML:

</head>
<img src="/portfolio/images/me.jpg" class="ri">
<body>
    <header>
        <div class="contain">
            <a href="/"><img src="/portfolio/images/logo.png" alt="Logo" width="200" height="200"></a>
        </div>
    </header>
        <div class="contain">
            <nav>
                <ul>
                    <li><a href="/contact">Contact</a></li>
                    <li><a href="/work">Work</a></li>
                    <li><a href="/details">Details</a></li>
                </ul>
            </nav>
        </div>

CSS:

    .contain {
    width: 980px;
    margin: 0 auto;
}

img.ri {
    position: absolute;
    max-width: 100%;
    min-width: 980px;
    top: 0%;
    left: 0%;
    border-radius: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.9);
    z-index: -200;

}

        body {

    .lift {
    height: 80px;
    }

    header {
4

2 に答える 2

0

これを使用してみることができます：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {
display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

img タグに clearfix を class="clearfix" として追加するだけです

于 2013-05-02T18:10:58.237 に答える
0

絶対位置ではなくフロートを使用した場合、これはあなたが望むことを行います。また、体の外に出してはいけません。

例については、http://jsfiddle.net/BnCQp/を参照してください。

コードはこんな感じ

.contain {
    width: 980px;
    margin: 0 auto;
    float:left;
}

img.ri {
    float:left;
    max-width: 100%;
    min-width: 980px;
    top: 0%;
    left: 0%;
    border-radius: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.9);
    z-index: -200;

}
于 2013-05-02T18:04:48.953 に答える