Question

我对这样的图像有一个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

Answer 1

您可以添加以下内容：

img {
    display: block;
}

.q {
    float: left;
}

并删除：

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

<强> jsfiddle

Answer 2

将div的边距和填充设置为零：

div.q{
margin:0;
padding:0;
}

Answer 3

在这里哟去

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

Answer 4

我发现这种方法最简单，

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

＆＃34;显示：内联块;＆＃34;确保整个图像在<div>标记内被包裹。

包裹图像周围的div

4 个答案: