2

親divから画像を分割したいと思います。私が抱えている主な問題は、元の画像の幅または高さがわからないことです。また、JavaScriptを使用して修正することもできません。

を使用position:absolute;すると画像に適切な効果が得られますが、下の<p></p>コンテンツが画像の下に乗り上げます。

親 div から抜け出す画像

HTML:

    <div>
        <h1>Some Title</h1>
        <figure>
            <img src="someimage.jpg" />
        </figure>
        <p>Some description</p>
    </div>

CSS:

div{
    width:700px;
    }

img{
    width: 80%;
    margin: 0px 0 0 -40%;
    left: 50%;
    position: absolute;
    display: block;
    }

編集: 画像はブラウザー ウィンドウよりも広くしてはなりません (したがって、スクロールがトリガーされます)。

4

3 に答える 3

3

あなたが望むのは、paragraph常に画像のすぐ下にいることだと思います。

and since you have made your img position:absolute, it will behave independent of it's parent div. that's why the paragraph gets rendered just after the h1 tag.

also, fixations through setting margin values of a position:absolute element, or padding, won't help you much, as you can never tell what width and size your image can be, combined with range of resolutions(including IE). so i'am not gonna suggest you those temporary workouts:

What best you should do in my views is, changing your layout structure: see, anyway, content-area behind your img is not going to be visible, so why not keep three separate containers? and position them relatively?

see this markup:

<div class="wrapper">
            <div class='header'>
                <h1>Some Title</h1>
            </div>
            <div class="image">
                <figure>
                    <img src="someimage.jpg" />
                </figure>
            </div>
            <div class="para">
                <p id="paragraph">Some description</p>
            </div>
</div>

and see this css:

 .header
    {
        position: relative;
        left:10%;
        width:80%;
        height: 20%;
        background-color: #CCCCCC;
        text-align: center;
    }
    .wrapper
    {
        width: 100%;
        height: auto;
    }
    .image
    {
        position: relative;
        top:20%;
        width: auto;
        background-color: #EEEEEE;
        height: auto; 
        text-align: center;
    }
    .image > figure >img
    {
        width: 1800px;
        height: 800px;
        border:1px Solid #CCCCCC;
    }
    .para
    {
        position: relative;
        left:10%;
        width:80%;
        height: 20%;
        background-color: #555555;
        text-align: center;
    }

fiddle

benefits:

  1. this will work in all resolutions.

  2. your paragraph container will position itself according to the img height;

  3. 今、私は img に非常に高い値を与えました。あなたがしなければならないことは、img の高さと幅を 100% に設定することだけです。

それはうまくいくはずです。そうでない場合は教えてください

于 2013-03-10T17:56:21.480 に答える
0

JSFiddle

div{
    width:700px;
    background:#000;
    position:relative;
    margin:0 auto;
    color:#fff;
    text-align:center;
}

img{
    width: 120%;
    margin: 0px 0 0 -10%;
    position: relative;
    display: block;
}

HTMLは変更されません。CSSの一部は例のためのものです（background-colorなど）。

とにかく、に設定するimgとposition:relative、テキストが画像の下に残るようになります。の代わりにmargin: 0 0 0 -10%、left: -10%も機能します。

于 2013-03-10T18:03:36.700 に答える
0

わかりました、私はあなたが静的な幅を持つことができると思いますdivか？そして、あなたは画像の最大サイズを持つことができますか? その場合は、この解決策を試してください。

基本的に、私は div を に設定しwidth:500px、図を に設定します700px。さて、図は200pxコンテナ（各側）よりも大きい100pxので、図を左に移動します100px（負のマージンを避ける必要があるため、エレガントなソリューションではありませんが、デモンストレーション目的で使用する必要がありました）。中央揃えをオンにします図。これにより、画像が常に図の中央に配置されます。それが理にかなっていることを願っています！

于 2013-03-10T17:37:09.470 に答える