Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Josh McMullin
3,012 PointsNeed help with containing an image in a <div>.
I've got an image inside of a div that I need help figuring out how to resize. I can't get it to resize as the page expands and shrinks. My problem child is in the div titled "images". I'd appreciate any help.
Here's my markup -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'>
<title>Flower's by Tori</title>
</head>
<body>
<div id ="header">
<h1 class="home_logo"><a href="index.html">Tori Patocchi</a></h1>
<h1 class="home_logo"><a href="index.html">Flower Design</a></h1>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="home_images">
<img src="img/Collage.jpg" alt="A picture of flowers" width="375" height="473" / >
</div>
<div id="home_intro">
<blockquote>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>
</div>
</body>
</html>
and here's my CSS -
html {
width: 100%;
margin-left: auto;
margin-right: auto;
/*background-image: url(../img/swirl_pattern.png);*/
display: block;
}
body {
width: 100%;
background-color: rgba(255, 255, 255, 0.6);
display: block;
max-width: 99%;
}
#header {
display: block;
padding: 1%;
background-image: url(../img/LogoBackground1.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-origin: content-box;
background-position: center top;
overflow: hidden;
min-height: 180px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box}
/**********Fonts***********/
h1, h2 {
font-family: 'Lobster', cursive;
}
#nav {
font-family: 'Lobster', cursive;
}
blockquote {
font-family: 'Lato', sans-serif;
}
p {
font-family: 'Lato', sans-serif;
}
/****Logo****/
.home_logo {
margin: 0;
margin-left: -2em;
height: 66.6%;
text-align: center;
}
.home_logo a:link {
text-decoration: none;
color: white;
}
.home_logo a:visited {
color: white;
}
.home_logo a:hover {
color: white;
}
/****Navigation****/
#nav {
display: block;
width: 100%;
margin-top: 1%;
background-color: rgba(217, 140, 242, 0.9);
overflow: hidden;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
width: 19.5em;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: .8em;
margin: .28em;
}
#nav ul li a:link {
color: rgb(29, 29, 29);
text-decoration: none;
}
#nav ul li a:visited {
color: rgb(29, 29, 29);
}
#nav ul li a:hover {
color: white;
}
/*****Body*****/
#home_images {
display: block;
float: left;
width: 42%;
margin: 1% 1% 0 1%;
min-width: 42%;
border: 1px solid red;
overflow: auto;
}
img {
position: absolute;
min-width: 38%;
}
#home_intro {
display: block;
float: left;
margin: 0;
width: 54%;
padding: 0 0 0 .5em;
background-color: white;
max-width: 54%;
border: 1px solid red;
}
#home_intro blockquote {
margin: .3em .4em .4em .4em;
}
/**** Page Portfolio ***/
#portfolio1 {
width: 984px;
height: 2600px;
}
#portfolio1 ul {
margin: 100px 0 0 0;
padding: 0;
display: block;
list-style-type: none;
width: 984px;
height: 2500px;
}
#portfolio1 ul li {
background-color: grey;
float: left;
}
#item-1 {
display: block;
margin: 30px 0 0 50px;
width: 400px;
height: 400px;
float: left;
}
#item-2 {
display: block;
margin: 5px 0 0 35px;
width: 450px;
height: 450px;
float: right;
}
#item-3 {
display: block;
margin: 0 0 0 10px;
width: 463px;
height: 489px;
clear: both;
}
#item-4 {
display: block;
margin: -450px 0 0 500px;
width: 463px;
height: 369px;
float: right;
}
#item-5 {
display: block;
margin: 30px 0 0 100px;
width: 800px;
height: 601px;
clear: both;
}
#item-6 {
display: block;
margin: 20px 0 0 200px;
width: 300px;
height: 364px;
clear: both;
}
#item-7 {
display: block;
margin: -360px 0 0 550px;
width: 307px;
height: 345px;
float: right;
}
#item-8 {
display: block;
margin: 20px 0 20px 160px;
width: 720px;
height: 472px;
clear: both;
}
#anchor1 {
display: block;
clear: both;
margin: -500px 0 30px -40px;
color: black;
font-size: 1.5em;
}
/*****************Contact Page*********************/
#test2 {
background-image: url("images/Logo_Background_Test.jpg");
margin: 0;
}
#test2 h1 {
text-align: left;
}
.nav1 {
height: 50px;
margin: 0;
list-style: none;
float: left;
}
.nav_item1 {
margin: 0 100px 0 0;
padding: 5px 0 0 0;
display: inline-block;
font-size: 1.7em;
}
.nav_item1 a:link {
color: rgb(29, 29, 29);
text-decoration: none;
}
.nav_item1 a:visited {
color: rgb(29, 29, 29);
}
.nav_item1 a:hover {
color: white;
}
#col1 {
float: left;
width: 450px;
margin: 5px 0 0 0;
}
#col2 {
float: right;
width: 450px;
}
#contact_body a:link {
text-decoration: none;
color: black;
}
#contact_body a:hover {
color: orange;
}
#contact_body img {
margin: 5px 15px 5px 0;
float: left;
}
3 Answers
Marcus Parsons
15,719 PointsHey Josh,
Are you referring to the image "Collage.jpg"? If so, the problem is that you are setting the width and height property in the element itself which sets the width and height to fixed pixel values.
For example, what you have currently:
<img src="img/Collage.jpg" alt="A picture of flowers" width="375" height="473" / >
is the same as putting this in CSS:
img {
width: 375px;
height: 473px;
}
My recommendation to fix this problem is to give the picture a responsive width and height using the % unit instead of pixels. The reason why I say this is that pixels are a fixed unit, which means that they will stay the same size despite the resolution they are being displayed on. So, if they are on a mobile screen, they will look huge, and on a wide format screen, they will look tiny. Instead, if we use % values for the width and height, the images will scale with the resolution they're being displayed on.
In order to calculate a responsive unit, you use "(target / context) * 100 = %", where the target is the fixed pixel unit you have it currently set to i.e. 375px for width and context is either your screen resolution on your computer's width or height respective to the unit you're converting.
So, let's say our screen resolution is 1280 x 1024 (width X height) the responsive width would be "(375 / 1280) * 100" which equals "29.296875%". And our responsive height would be "(473 / 1024) * 100" which equals "46.19140625%".
Now, let's say we get rid of the width and height properties on the HTML element itself:
<div id="home_images">
<img src="img/Collage.jpg" alt="A picture of flowers" / >
</div>
And set the responsive width and height via CSS as is recommended by the W3:
/* Select images within the element with ID of home_images */
#home_images img {
width: 29.296875%;
height: 46.19140625%;
}
Please note that those responsive units I posted above are for that screen resolution of 1280 x 1024. If your screen resolution is different on your PC, you need to check and see what it is and calculate from there.
Now, when you calculate out your responsive units, your images will scale up or down with the page. If you'd like me to, I will post a simple conversion HTML page I've written up that I use to convert pixel units to % very easily.
Josh McMullin
3,012 PointsThanks for the feedback and suggestions. I'll try this out and let you know how it goes.
Marcus Parsons
15,719 PointsAwesome, Josh. Here is that HTML page I was telling you about. You can put this into Workspaces, on your local computer, whatever you'd like, and it will do all of the heavy lifting for you. It automatically grabs the correct dimensions from your PC and converts your pixel units to % for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Percentage Converter</title>
</head>
<body>
<h2>This converter uses your screen resolution to create a responsive unit from pixels.</h2>
Enter dimension to convert: <input type="text" id="initDim">px
<br><br>
Choose width or height: <select name="dim" id="dim">
<option value="Width">Width</option>
<option value="Height">Height</option>
</select>
<br><br>
Enter decimal precision: <input type="text" id="prec" value="8">
<br><br>
New responsive value: <input type="text" readonly="readonly" id="finalDim">
<br><br>
<button onclick="javascript:convertDim();">Convert!</button>
<script type="text/javascript">
function convertDim() {
var initDim = document.getElementById("initDim");
var finalDim = document.getElementById("finalDim");
var initDimVal = Number(initDim.value);
var finalDimVal = Number(finalDim.value);
var prec = document.getElementById("prec");
var precVal = Number(prec.value);
var sel = document.getElementById("dim");
if (sel.options[sel.selectedIndex].value == "Width"){
var screenWidth = screen.availWidth;
finalDimVal = ((initDimVal / screenWidth) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
else{
var screenHeight = screen.availHeight;
finalDimVal = ((initDimVal / screenHeight) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
}
</script>
</body>
</html>
Josh McMullin
3,012 PointsSo I ran into some issues using the different percentage values. I ended up setting the width to 100% and the height to auto. Now it resizes when I resize the window. The idea got me headed in the direction I was looking for. Thank you very much.
Marcus Parsons
15,719 PointsYou're welcome. Did you calculate your own percentage values or did you just use the example ones I gave you?
Josh McMullin
3,012 PointsHi Marcus, sorry for just now getting back to you. I calculated my own percentages after tinkering around with the ones you gave me. I'm trying to learn that formula and be more comfortable with it. I've been having problems with applying the knowledge from here and other resources because it seems like most resources want to teach you how build a site ground up without making it responsive first. Which means after you've marked stuff up, you have to convert everything over to EM's and %'s.
Marcus Parsons
15,719 PointsYou can do it any way that you choose. A good starting place to come up with those responsive units is by setting everything to your own pixel unit first, see where it looks good to you, and then convert those units over to responsive units. But, there's no reason why you can't start off with % and em, either, instead of px. It's up to you.
That converter page I posted for you will help with your conversions. In fact, I made a slight modification to it to get more precision out of the responsive units.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Percentage Converter</title>
</head>
<body>
<h2>This converter uses your screen resolution to create a responsive unit from pixels.</h2>
<p><strong>MAKE SURE YOUR WINDOW IS MAXIMIZED.</strong></p>
Enter dimension to convert: <input type="text" id="initDim">px
<br><br>
Choose width or height: <select name="dim" id="dim">
<option value="Width">Width</option>
<option value="Height">Height</option>
</select>
<br><br>
Enter decimal precision: <input type="text" id="prec" value="8">
<br><br>
New responsive value: <input type="text" readonly="readonly" id="finalDim">
<br><br>
<button onclick="javascript:convertDim();">Convert!</button>
<script type="text/javascript">
function convertDim() {
var initDim = document.getElementById("initDim");
var finalDim = document.getElementById("finalDim");
var initDimVal = Number(initDim.value);
var finalDimVal = Number(finalDim.value);
var prec = document.getElementById("prec");
var precVal = Number(prec.value);
var sel = document.getElementById("dim");
if (sel.options[sel.selectedIndex].value == "Width"){
var screenWidth = document.body.offsetWidth;
finalDimVal = ((initDimVal / screenWidth) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
else{
var screenHeight = document.body.offsetHeight;
finalDimVal = ((initDimVal / screenHeight) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
}
</script>
</body>
</html>
Dustin Matlock
33,856 PointsDustin Matlock
33,856 PointsJosh, code highlighting has been fixed for you.