PDA

View Full Version : CSS to resize image accordingly



ransyn
Mar 10th, 2011, 08:40 AM
hey guyz new here and needed help with some CSS coding...

im using a tumblr html and CSS code found here

http://museumtheme.tumblr.com/

but when uploading photos arent resized and are too big to fit in the boxes, was wondering if anyone could have a look at the coding and see what i need to put in... i know where i just dont know what....

thnx guyz

quartzy
Mar 11th, 2011, 03:35 PM
You should not resize images with CSS, as it makes the page load slowly resize them manually then add them.

jfields03
Mar 11th, 2011, 04:35 PM
I would agree quartzy. Having your website recalulate photos just takes too long. It is so much more effecient sizing them then positioning them when they are the right size.

Excavator
Mar 11th, 2011, 05:45 PM
Hello ransyn,
Now that you know it's better to resize them yourself, you can force the browser to resize an image from the CSS. See the id on the image and adjust your size in pixels with the corresponding CSS entry -


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#photo {
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<div id="container">
<img src="yourPic.jpg" alt="description" id="photo" />
<!--end container--></div>
</body>
</html>