PDA

View Full Version : clip an image if it's too big?



student101
Mar 15th, 2008, 12:56 PM
Is there a method or code that can clip an image if it's too big?

This placeholder has the allowed size for images.
placeholder: width = 150px, height = 150px

These images need to be clipped as apposed to resized to fit.
image1: width = 180px, height = 300px
image2: width = 320px, height = 712px

Is this possible?

This doesn't cut off my images.
The image gets resized and looks crap, terrible!


.photos{
float:right;
padding: 10px;
/*text-align: center;*/
}
.photos img{
vertical-align: top;
background-image: url(../images/image1.gif);/*true image size is 500px by 877px*/
overflow: auto;
width: 250px;
background-position: center center;
background-repeat: no-repeat;
display: block;
}

Apostropartheid
Mar 15th, 2008, 03:09 PM
background-position: top left should make the image not resize.
Are you setting an src value for the HTML img? If so, that's not helping

student101
Mar 15th, 2008, 03:17 PM
No luck, same thing.
Yes, otherwise I have to have only one css rule for this div?

student101
Mar 15th, 2008, 03:27 PM
background-position: top left should make the image not resize.
Are you setting an src value for the HTML img? If so, that's not helping

Thanks,
Made me realize that I had to consolidate it into one css tag.

.photos{
float:right;
padding: 10px;
vertical-align: top;
background-image: url(../images/image1.gif);/*true image size is 500px by 877px*/
overflow: auto;
width: 250px;
background-position: top left;
background-repeat: no-repeat;
display: block;
}
Working now, ODD?

coothead
Mar 15th, 2008, 03:37 PM
Hi there student101,

if you wish to display a particular part of an image, you can use the CSS property clip.
You can see an example here...

http://mysite.orange.co.uk/azygous/clip_img.html
...and the code here...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>css image clipping</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#unclipped {
width:445px;
height:238px;
border:3px double #666;
margin: 10px auto;
}
#unclipped img{
display:block;
}
#clipped {
position:relative;
width:150px;
height:150px;
border:3px double #666;
margin:auto;
}
#clipped img {
position:absolute;
width:445px;
height:238px;
left:-148px;
top:-44px;
clip:rect(44px, 297px, 194px, 148px);
}
</style>

<!--[if IE]>
<style type="text/css">
#clipped img {
clip:rect(44px 297px 194px 148px);
}
</style>
<![endif]-->

</head>
<body>

<div id="unclipped">
<img src="images/ten_quid.jpg" alt="">
</div>

<div id="clipped">
<img src="images/ten_quid.jpg" alt="">
</div>

</body>
</html>

coothead

student101
Mar 15th, 2008, 03:39 PM
F'n COOL.

Thanks.

coothead
Mar 15th, 2008, 03:48 PM
No problem, you're welcome. ;)

student101
Mar 15th, 2008, 08:08 PM
I have an entirely new issue.
If I copy and paste the entire css data out into the html parts it stops working:

<style media="all" title="style" type="text/css">
...CSS CODE...
</style>
When I use this then it's back to normal and works fine.

<link href="css/style.css" rel="stylesheet" type="text/css" />
Any ideas?

Cheers

Apostropartheid
Mar 15th, 2008, 08:18 PM
Tried removing the media attribute? That's the only thing I could think of could cause a problem...

coothead
Mar 15th, 2008, 08:28 PM
Hi there student101,

without seeing the full document code or a link to the problematic page, it is almost impossible to answer your question. ;)

coothead

student101
Mar 15th, 2008, 08:36 PM
Tried removing the media attribute? That's the only thing I could think of could cause a problem...

Tried that and even changed DOC types, No luck

student101
Mar 15th, 2008, 08:42 PM
Hi there student101,
without seeing the full document code or a link to the problematic page, it is almost impossible to answer your question. ;)coothead

Do you need the CSS?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...Title...</title>
<!--<style media="all" title="style" type="text/css">
This doesn't work, sh1t
</style>-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header" align="center">
<div id="sub_menu"><?php include('menu.php'); ?></div>
</div>
<div id="content">
<div id="left">
<div class="text">
<div class="photos"></div>
<p><?php //PHP stuff; ?></p>
</div>
<div class="clear"></div>
</div>
<div id="right">
<h2>BRands</h2>
<div>
<?php include('new.php'); ?>
</div>
<p>&nbsp;</p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer"><br />
</div>
</body>
</html>

coothead
Mar 15th, 2008, 08:59 PM
Hi there student101,

how on earth would anyone be able to see what is wrong with the code that you have posted?
There is no CSS to examine, there are no images to view. :eek:
To solve a problem, we need to see the problem. ;)

I have posted an example that works, therefore one must naturally assume that you have made an error in your coding. ;)

I suggest your best bet is to post a link to your problematic page.


coothead

student101
Mar 15th, 2008, 09:10 PM
Ok cool, here is the CSS:
I am not sure I understand though, you are saying that the CSS is not rendering due to CSS?

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
background-position: 0px 0px;
background-color: #FFFFFF;
background-color: #e5e2db;
text-align: center;
}

* {
margin: 0px;
padding: 0px;
margin-top: 0px;
}
.clear{
clear:both;
}

#container {
margin: 0px auto;
text-align: left;
width: 774px;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom-width: 0px;
}
/********************** Header ***************************/
#logo{
height: 105px;
width: 774px;
margin: 0px;
padding: 0px;
text-align: center;
background-image: url(../images/image1.gif);
background-repeat: no-repeat;
background-position: center;
}
#logo a{
margin: 0px auto;
}

p ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 20px 5px;
color: #4d4b4a;
}

#header {
margin: 0px;
width: 774px;
height:100px;
background-image: url(../images/menu/menu_1.jpg);
background-repeat: no-repeat;
position:relative;
}

#sub_menu {
font: bold 11px Arial, Helvetica, sans-serif;
text-decoration: none;

}

#sub_menu ul{
list-style-type: none;
/*display:inline;*/
position:relative;
top:80px;
left:80px;
width: 512px;
text-align: center;
vertical-align: middle;
}

#sub_menu li{
float:left;

}

#sub_menu ul a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding: 0px 7px 0px 7px;
color: #000000;
/*border-right: 2px solid #4d4b4a;*/
}

#sub_menu ul a:hover{
color:#000000;
text-decoration: underline;
}


/*.lastchild{
border-right: 0px none #4d4b4a !important;
}*/
/************************* Menu ****************************/

/********************** Content ***************************/

#content{
width:774px;
display:block;
background-color: #FFFFFF;
background-image: url(../images/sliced_10.jpg);
background-repeat: repeat-x;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;

}

#content h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bolder;
color: #4d4b4a;
margin: 0px 23px 6px 28px;
padding: 20px 0px 0px 0px;
border-bottom: 1px solid #4d4b4a;
}
/********************** Content - left ***************************/
#left {
width:550px;
margin: 0px 0px 10px 28px;
padding: 0px 0px 15px;
float:left;
display:inline;
}
.text{
float:left;
width:550px;
background: #FFFFFF;
padding: 10px 5px 10px 0px;
border: 1px solid #FD9743;
}
#left h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #4d4b4a;
text-decoration: underline;
margin: 20px 0px 10px 23px;
}
#left p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:lighter;
color: #4d4b4a;
margin: 6px 0px 0px 23px;
}
#left a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;color: #4d4b4a;
}
#left a:hover{
color:#000000;
}

.photos{
float:right;
vertical-align: top;
background-image: url(../images/photo1.gif);
width: 150px;
background-position: left top;
background-repeat: no-repeat;
height: 150px;
text-align: center;
border: thin dotted #000000;
display: block;
padding: 10px;
/*text-align: center;*/
/*background-position: center center;*/
}

/********************** Content - right ***************************/
#right {
float:right;
width:156px;
margin: 0px 23px 10px 0px;
padding: 0px 0px 6px 0px;
display:inline;
border: 1px solid #FD9743;
background: #F8E8D9;
}
#right h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #000000;
text-decoration: none;
text-transform: uppercase;
background-color:#FD9743;
width:156px;
text-align:center;
padding: 3px 0px 3px 0px;
}
#right p{
padding: 10px 9px 0px 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
#right a{
padding: 15px 9px 5px 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight:bolder;
display:block;
}
#right a:hover{
color:#000000;
}
#right span a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
color: #000000;
text-decoration: none;
text-transform: uppercase;
background-color:#FD9743;
width:138px;
text-align:left;
padding: 3px 0px 3px 5px;
margin: 15px 6px 0px 6px;
}

/********************** footer ***************************/
#footer{
width: 774px;
height:33px;
background-image: url(../images/footer_1.jpg);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
color: #000000;
padding-top: 0px;
margin: 0px auto;
text-align: center;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;

}
#footer a {

}
#footer a:hover{
color:#000000;
}
I have left the clipped image part till this works.
The problem:
I need to have a different image on each page, the CSS part needs to be accessible from the database.(where the image names are stored)

student101
Mar 15th, 2008, 09:25 PM
Hi there student101,
how on earth would anyone be able to see what is wrong with the code that you have posted?
There is no CSS to examine, there are no images to view. :eek:
To solve a problem, we need to see the problem. ;)
I have posted an example that works, therefore one must naturally assume that you have made an error in your coding. ;)
I suggest your best bet is to post a link to your problematic page.
coothead

If you use the style sheet in an external file it works fine?
It must an HTML thing, no idea?

Cheers

coothead
Mar 15th, 2008, 09:37 PM
Hi there student101,

I have been able to test this code, it works OK and validates OK for both HTML and CSS. ;)
You appear, although , to have some superfluous rules in there. :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...Title...</title>
<style media="all" title="style" type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
background-position: 0px 0px;
background-color: #FFFFFF;
background-color: #e5e2db;
text-align: center;
}

* {
margin: 0px;
padding: 0px;
margin-top: 0px;
}
.clear{
clear:both;
}

#container {
margin: 0px auto;
text-align: left;
width: 774px;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom-width: 0px;
}
/********************** Header ***************************/
#logo{
height: 105px;
width: 774px;
margin: 0px;
padding: 0px;
text-align: center;
background-image: url(../images/image1.gif);
background-repeat: no-repeat;
background-position: center;
}
#logo a{
margin: 0px auto;
}

p ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 20px 5px;
color: #4d4b4a;
}

#header {
margin: 0px;
width: 774px;
height:100px;
background-image: url(../images/menu/menu_1.jpg);
background-repeat: no-repeat;
position:relative;
}

#sub_menu {
font: bold 11px Arial, Helvetica, sans-serif;
text-decoration: none;

}

#sub_menu ul{
list-style-type: none;
/*display:inline;*/
position:relative;
top:80px;
left:80px;
width: 512px;
text-align: center;
vertical-align: middle;
}

#sub_menu li{
float:left;

}

#sub_menu ul a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding: 0px 7px 0px 7px;
color: #000000;
/*border-right: 2px solid #4d4b4a;*/
}

#sub_menu ul a:hover{
color:#000000;
text-decoration: underline;
}


/*.lastchild{
border-right: 0px none #4d4b4a !important;
}*/
/************************* Menu ****************************/

/********************** Content ***************************/

#content{
width:774px;
display:block;
background-color: #FFFFFF;
background-image: url(../images/sliced_10.jpg);
background-repeat: repeat-x;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;

}

#content h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bolder;
color: #4d4b4a;
margin: 0px 23px 6px 28px;
padding: 20px 0px 0px 0px;
border-bottom: 1px solid #4d4b4a;
}
/********************** Content - left ***************************/
#left {
width:550px;
margin: 0px 0px 10px 28px;
padding: 0px 0px 15px;
float:left;
display:inline;
}
.text{
float:left;
width:550px;
background: #FFFFFF;
padding: 10px 5px 10px 0px;
border: 1px solid #FD9743;
}
#left h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #4d4b4a;
text-decoration: underline;
margin: 20px 0px 10px 23px;
}
#left p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:lighter;
color: #4d4b4a;
margin: 6px 0px 0px 23px;
}
#left a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;color: #4d4b4a;
}
#left a:hover{
color:#000000;
}

.photos{
float:right;
vertical-align: top;
background-image: url(../images/photo1.gif);
width: 150px;
background-position: left top;
background-repeat: no-repeat;
height: 150px;
text-align: center;
border: thin dotted #000000;
display: block;
padding: 10px;
/*text-align: center;*/
/*background-position: center center;*/
}

/********************** Content - right ***************************/
#right {
float:right;
width:156px;
margin: 0px 23px 10px 0px;
padding: 0px 0px 6px 0px;
display:inline;
border: 1px solid #FD9743;
background: #F8E8D9;
}
#right h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #000000;
text-decoration: none;
text-transform: uppercase;
background-color:#FD9743;
width:156px;
text-align:center;
padding: 3px 0px 3px 0px;
}
#right p{
padding: 10px 9px 0px 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
#right a{
padding: 15px 9px 5px 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight:bolder;
display:block;
}
#right a:hover{
color:#000000;
}
#right span a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
color: #000000;
text-decoration: none;
text-transform: uppercase;
background-color:#FD9743;
width:138px;
text-align:left;
padding: 3px 0px 3px 5px;
margin: 15px 6px 0px 6px;
}

/********************** footer ***************************/
#footer{
width: 774px;
height:33px;
background-image: url(../images/footer_1.jpg);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
color: #000000;
padding-top: 0px;
margin: 0px auto;
text-align: center;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;

}
#footer a {
}
#footer a:hover{
color:#000000;
}
</style>

</head>
<body>
<div id="container">
<div id="header" align="center">
<div id="sub_menu"><?php include('menu.php'); ?></div>
</div>
<div id="content">
<div id="left">
<div class="text">
<div class="photos"></div>
<p><?php //PHP stuff; ?></p>
</div>
<div class="clear"></div>
</div>
<div id="right">
<h2>BRands</h2>
<div>
<?php include('new.php'); ?>
</div>
<p>&nbsp;</p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer"><br />
</div>
</body>
</html>

coothead

student101
Mar 15th, 2008, 09:55 PM
Do images get displayed?


background-image: url(../images/image1.gif);
background-image: url(../images/menu/menu_1.jpg);
background-image: url(../images/photo1.gif);

You could use any image for "photo1.gif"

coothead
Mar 15th, 2008, 10:12 PM
Hi there student101.

As said in my previous post..


I have been able to test this code, it works OK and validates OK for both HTML and CSS.
As you did not supply any images, I, obviously, had to test with some of my own.
If your images do not appear for you then the path to them must be incorrect.
Test for this by using an absolute url instead of the relative url.

coothead

student101
Mar 15th, 2008, 10:18 PM
then the path to them must be incorrect
You make a valid F'n point!!!
../ (Here is the F'n problem)
Remember that the page is in the root and the images folder is too!!!
I can kick myself, F'n slow tonite.

student101
Mar 15th, 2008, 10:21 PM
Thank you AGAIN!
F! man I am just tired right now.

I guess it takes an outsider to point out the obvious.
Thanks

What do you mean by:
superfluous rules
Cheers

student101
Mar 15th, 2008, 10:26 PM
Ok got it:
-adjective

1. being more than is sufficient or required; excessive.
2. unnecessary or needless.
3. Obsolete. possessing or spending more than enough or necessary; extravagant.

student101
Mar 15th, 2008, 10:40 PM
I use:

Dust-Me Selectors is a Firefox extension that finds unused CSS selectorsAfterwards.

Cheers

coothead
Mar 15th, 2008, 10:54 PM
Hi there student101,

the reason that I said there were superfluous rules was that you used


* {
margin: 0px;
padding: 0px;
margin-top: 0px;
}

..and then proceeded to use margin:0 and padding:0 at regular intervals thereafter. ;)
Even margin-top:0px; in the original rule was unnecessary. :)

coothead

student101
Mar 15th, 2008, 11:15 PM
Cool, got it.
I am not a CSS fundi, but am learning as I go/get along.

coothead
Mar 15th, 2008, 11:33 PM
Hi there student101,

I am not a CSS fundi....
Well, you soon will be if you stick around here long enough. :D

coothead

student101
Mar 15th, 2008, 11:39 PM
The worst part is that I forget so quick.
I just get this right then a couple of months from now I have to search again.

Busy creating a system where I can keep all my Questions and Answers in a database.
Wont forget this one.

Cheers

VIPStephan
Mar 16th, 2008, 12:03 PM
student101, did you know that you can edit your posts? No need to make a thread unnecessarily long by replying to your own posts with some information of which the relevance is questionable.

student101
Mar 16th, 2008, 12:45 PM
Thanks