|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
Stay one step ahead of the competition. Evaluate and give feedback
on some of the hottest web development tools on the market today.
Make your opinion heard! Click
Here
|
|
#1
March 8th, 2008, 12:38 AM
|
|||
|
|||
How to clip images that don't fit?
Is there a method or code that can clip an image if it's too big?
This placeholder is the allowed size for images. image 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? Cheers
|
|
#2
March 10th, 2008, 06:29 PM
|
|||
|
|||
|
Well it depends on what's your aim. You can create a 150x150px div with background-image set to appropriate url. No matter how big is your image it will be clipped to the size of the div. You can also set background-position to 'center center' to place smaller images in the center or the div
|
|
#3
March 10th, 2008, 06:35 PM
|
|||
|
|||
|
Cool,
What about dynamic images? They will then also be clipped in the div.
|
|
#5
March 11th, 2008, 07:15 AM
|
|||
|
|||
|
Cool, Thanks
Rather not though.
|
|
#6
March 15th, 2008, 05:47 AM
|
|||
|
|||
|
This doesn't cut off my images.
The image gets resized and looks crap, terrible! Code:
.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;
}
|
|
#7
March 15th, 2008, 03:24 PM
|
|||
|
|||
|
I was talking about DIV not IMG. For example, this style when applied to a DIV should work as i told:
Code:
div {
width:150px;
height:150px
background-image: url(../images/image1.gif);/*true image size is 500px by 877px*/
background-position: center center;
background-repeat: no-repeat;
}
If you want to add scrolling you may use this: Code:
<style>
div {float:left;width:150px;height:150px;border:1px solid red;overflow:auto}
</style>
</head>
<body>
<div><img src='/test/big_image.png' /></div>
</body>
|
|
#8
March 15th, 2008, 03:29 PM
|
|||
|
|||
|
Cool thanks.
I got it working, like right now (talk about coinsedince(no idea how to spell this f'n thing))
|
|
#9
March 15th, 2008, 03:36 PM
|
|||
|
|||
|
Both centering small images and scrolling big ones figured out to be a bit more intricate. In this code DIV adds scrolling and TD adds centering vertically ('caz it's the only element that allows this - in DIV you can align subelements only relative to text baseline, not to its bounds - see CSS spec).
Code:
<style>
div {width:150px;height:150px;overflow:auto;border:1px solid red}
table {border-collapse:collapse}
td {padding:0px;width:150px;height:150px;text-align:center;vertical-align:middle}
</style>
</head>
<body>
<div>
<table>
<tr>
<td><img src='/test/big_image.png' /></td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td><img src='/test/small_image.png' /></td>
</tr>
</table>
</div>
</body>
|
|
#10
March 15th, 2008, 03:43 PM
|
|||
|
|||
|
Interesting...
I will have a look at it tomorrow morning when I am more awake. Thank you, You know your CSS
|
|
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > How to clip images that don't fit? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
