CODEWITHSUNDEEP
csshtml
SurvMach
SurvMach

Reputation: 119

How do I make an image resize inside a div that is resizing to a percentage of a parent div?

The image remains in its full size and I need it to fit inside its div.

I would also like to know how I could set 2 divs side by side inside of a parent at 90% maintaining its position.

Here are:

The HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="test">
    <div id="test2">
        <div id="test3">
               <div id="image"><img src="ayreon_wallpaper_the_human_equation_brain_1600.jpg" />
               </div>
        </div>
    </div>
</div>
</body>
</html>

The CSS

body{
background:#999;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#test{
width:90%;
height:90%;
background:#1d2122;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test2{
width:90%;
height:90%;
background:#3F0;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test3{
float:left;
width:90%;
height:90%;
background:#F00;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#image{
float:left;
width:90%;
height:90%;
background:#F00;
background-size:100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Upvotes: 0

Views: 5070

Answers (1)

Justin
Justin

Reputation: 27331

Change your css selector from #image to #image img

Example: http://jsfiddle.net/justincook/XFV5N/

The problem was that you were resizing the div around the image, not the image itself. By updating your CSS to style the img tag you solve the issue.

To set div's next to eachother, you can set them each as display:inline; width:50% or float:left; width:50%

Read more about float/inline: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Upvotes: 1

Related Questions