Geek asks and answers

Crop div around image

I have a div around an image like this:

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

As a result, the div is larger than the image. I would like to wrap it around the image, giving it the same height and width (without setting the size).

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

I tried the height and width of "auto", but it also does not work.

Jsfiddle

+5
source share
4 answers

You can add them:

img {
    display: block;
}

.q {
    float: left;
}

and delete:

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

jsfiddle

+12
source

Set the field and add div to zero:

div.q{
margin:0;
padding:0;
}
+2
source

yo go

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

,

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

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

"display: inline-block;" <div>.

0

More articles:


All Articles