Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wrap div around image

Tags:

css

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>

The result is that the div is bigger than the image. I would like to wrap it around the image giving it the same height and width (without setting dimension)

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 height and width 'auto' but it also doesn't work.

JsFiddle

like image 666
Youss Avatar asked Mar 25 '13 09:03

Youss


4 Answers

You could add these:

img {
    display: block;
}

.q {
    float: left;
}

and remove:

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

jsfiddle

like image 155
Joonas Avatar answered Jan 18 '23 01:01

Joonas


Set the margin and padding of the div to zero:

div.q{
margin:0;
padding:0;
}
like image 35
Henk Kroon Avatar answered Jan 18 '23 01:01

Henk Kroon


Here 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>
like image 33
Nayana Adassuriya Avatar answered Jan 18 '23 02:01

Nayana Adassuriya


I found this method the easiest,

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

This example has text in it but, even if you take the <h4> and last <p> tag the

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

The "display:inline-block;" ensures the whole image gets wraped within the <div> tag.

like image 35
user3736786 Avatar answered Jan 18 '23 01:01

user3736786