CSS
-Tricks
treehouse :
what would you like to learn today?
Web Design
Web Development
iOS Development
Show search box
Search
Search in:
All
Articles
Forums
Snippets
Videos
✕
Home
Forums
Snippets
Gallery
Videos
Almanac
Demos
Lodge
Navigation 'n' Search
Forums
Illustration by Nick Sirotich
Forums
»
CSS Combat
Propotional resize
XaviJr
Permalink to comment
#
May 2012
http://jsfiddle.net/pzFKD/
I want to resize the images so they occupy all the 170px and show the most of the image. Is it possible just with css?
Brightonmike
Permalink to comment
#
May 2012
Um, width 100%? No?
XaviJr
Permalink to comment
#
May 2012
no, there is the problem if the image with more height that width..
XaviJr
Permalink to comment
#
May 2012
I tried with width:100% and still not working..
http://jsfiddle.net/pzFKD/3/
BenWalker
Permalink to comment
#
May 2012
You need JavaScript if you want to do that. You want to variably resize the image based on the original dimensions. To do that, I am pretty sure you'll need the object model that JS provides.
Paulie_D
Permalink to comment
#
May 2012
You can't have it both ways, either they scale to the width or the height.
Simple answer, size your images appropriately before using.
XaviJr
Permalink to comment
#
May 2012
thank you for the answers, I really want to give liberty to my client so I'll use javascript.
TheDoc
Permalink to comment
#
May 2012
Assuming that they will all be bigger than 170x170 you could put it on the background:
http://jsfiddle.net/pzFKD/4/
Add a Comment
I want to resize the images so they occupy all the 170px and show the most of the image. Is it possible just with css?
http://jsfiddle.net/pzFKD/3/
Simple answer, size your images appropriately before using.