5

div 内に流動的な画像があり、画像の下にテキストを含む別の div があります。#text div が画像と同じサイズになることは可能ですか?

<div id="container">
    <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg">
    <div id="text">Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</div>
</div>


#container {
    display: inline-block;
    height: auto;
    max-width: 100%;
    position: relative;
}

img {
    max-width:100%; max-height:100%;
}

フィドル

4

6 に答える 6

5

#containerが相対的に配置されている#textため、 を絶対に配置して、 が伸びないようにすることができ#containerます。

#text {
    /* remove from flow, prevents from stretching container */
    position: absolute;
}

http://jsfiddle.net/HUsRm/5/

もちろん、これにより垂直方向のストレッチも防止され、次のコンテンツが押し下げられることはありません。これは望ましくないのでしょうか？

于 2013-07-05T08:40:41.750 に答える
0

このフィドルを試してください

#container {
    display: inline-block;
    height: auto;
    max-width: 100%;
    position: relative;
}

img {
    max-width:100%; max-height:100%;
}
#text{
    max-width:300px;

}
于 2013-07-05T08:38:17.283 に答える
0

figureとfigcaptionの適切なタグを使用することをお勧めします。とにかく、マークアップでも機能するクリーンなソリューションがここにあります。このFIDDLEで結果を確認できます。

    figure, #container {
            display: table;
            max-width: 100%; 
            width: auto !important;
            }

        img {
            display: table-row;
            max-width: 100%;
            width:100%;
        }

        figcaption, #text {
            display: table-caption;
            max-width: inherit;
            caption-side: bottom;
            word-wrap: break-word;
        }

    <!--[if lt IE 9]><style type="text/css">
    img,
    figcaption {
        width: auto !important;
    }
    </style><![endif]-->
    <figure>
        <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg" alt="alt text" />
        <figcaption>Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</figcaption>
    </figure>
<!-- YOUR MARKUP #2 -->
    <div id="container">
        <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg" alt="alt text" />
        <div id="text">Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</div>

    </div>

また、画像のサイズ変更を改善するために、このブログ投稿をご覧になることをお勧めします。

于 2013-07-05T10:25:10.347 に答える