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

CSS

Posted by Eli Tamosauskas
Eli Tamosauskas
9,776 Points

How to display image at half the size?

Can someone suggest a simple way to display images at half their original size on my site?

My logical attempt was:

width: 50% height: 50%

But it doesn't work?

2 Answers

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Eli,

Here's a CSS-Tricks article on transform. Perhaps this will work for you.

img {  
  transform: scale(0.5);
}

Cheers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Width: 50% and Height: 50% will set the image to 50% of the width and height of its current container.

What you are looking for is setting the image to 50% of its native width and height.

You could try using the CSS transformation (Scale)

Example: Codepen: http://codepen.io/anon/pen/JomLGa

HTML:

<h1> Orginal Image</h1>
<img src="http://www.realchaseadams.com/imgs/2014/01/Tree-House.png" alt="treehouse" />
<br />
<h1> Image with Scale Transformation</h1>
<img src="http://www.realchaseadams.com/imgs/2014/01/Tree-House.png" alt="treehouse" class="scaled" />

CSS:

.scaled{  
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -o-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

I have added in browser specific prefixes -ms-, -webkit-, -o-, -moz- as older versions of browsers require the prefix to use transformations in CSS (So I added it in to make the it as backwards compatible as much as is possible for you as it has not always been compatible but is now compatible with the latest versions of most popular browsers)