7

私はこのような画像の周りにdivを持っています：

<div class="q">
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>

その結果、divは画像よりも大きくなります。同じ高さと幅になるように画像をラップしたい（寸法を設定しない）

img {
    z-index: -1;
    position: relative;
    width:300px;
}

.q {
    width:100%;
    height:100%;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}

高さと幅の「自動」を試しましたが、機能しません。

JsFiddle

4

4 に答える 4

16

これらを追加できます：

img {
    display: block;
}

.q {
    float: left;
}

削除します：

.q {
    width: 100%
    height: 100%;
}

jsfiddle

于 2013-03-25T09:28:40.567 に答える
1

divのマージンとパディングをゼロに設定します。

div.q{
margin:0;
padding:0;
}
于 2013-03-25T09:24:25.780 に答える
1

どうぞ

<html>
<head>
<style type="text/css">
img {
    z-index: -1;
    position: relative;
    width:300px;
}

.q {
    width:300px;    
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
</style>
</head>
<body>
<div class="q">
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
<body>
</html>
于 2013-03-25T09:31:13.543 に答える
1

この方法が最も簡単だと思いました。

<div style="display:inline-block">

            <p style="float: left; padding-left: 20px">
                <img src="Images/user.png" style="height: 200px; width: 207px" />
            </p>
            <h4 style="text-align: center">Client Zone</h4>
            <p>So, he played with that child, the whole day long, and they were very merry.</p>
    </div>

この例にはテキストが含まれていますが、<h4>最後の<p>タグを取得した場合でも、

<div style="display:inline-block;" >

「display：inline-block;」画像全体が<div>タグ内にラップされるようにします。

于 2015-10-02T04:38:13.280 に答える