Menu
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
666
You could add these:
img {
display: block;
}
.q {
float: left;
}
and remove:
.q {
width: 100%
height: 100%;
}
jsfiddle
155
Set the margin and padding of the div to zero:
div.q{
margin:0;
padding:0;
}
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>
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
