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;
}

我尝试了高度和宽度“自动”，但它也不起作用。

提琴手

4

4 回答 4

16

你可以添加这些：

img {
    display: block;
}

.q {
    float: left;
}

并删除：

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

jsfiddle

于 2013-03-25T09:28:40.567 回答
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 的边距和填充设置为零：

div.q{
margin:0;
padding:0;
}
于 2013-03-25T09:24:25.780 回答
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;" >

“显示：内联块；” 确保整个图像被包裹在<div>标签内。

于 2015-10-02T04:38:13.280 回答