Using CSS to crop images

Omnutia

Hi All,
I've started to really get into blogging (my blog) and am currently using images from flickrCC in my posts. Currently I am always having to select the "small" size images, which don't take up as much space as I'd like but "medium" size images are too tall.
Instead of cropping every image as I put it in, is there a way I could create a box with the medium size image as a background and then shorten the box to crop the picture? If so, could someone show me the best way to do this using CSS.
Also, is there a way I could include the CSS code in the default page style and just add in the image's URL with minimal code while posting?

Apreche

You're going about this the wrong way.

First make an A tag that links to the full-size image. Then inside of that A tag, you put an IMG tag that shows the thumbnail image. Here is a small demo.



If you don't like the border, toss in a border="0", or set the border to none using css, like this.



If you want to get really fancy, you can throw in some JavaScript to make a Lightbox like this.

Omnutia

I don't think I explained clearly enough. I'm just using the image as a decoration, not as a feature, and just wanted to have it span the width of the entire post while taking up as much height as it does now by cropping some off the bottom.

Apreche

Oh, I get what you are saying. Well, the answer is yes and no. You can do something like this.
HTML
<div id="foobar"></div>
CSS
div#foobar {
background-image: url( 'images/theimage.jpg');
width: 100px;
height: 100px;
}

Using this method you will only see the top and left pixels of the image. However, this is the wrong way to do things. You really should crop the images in an image editor. You will only be able to crop pixels off of the right or bottom of an image. Also, you will have to finagle the CSS a bit to make sure that some browsers aren't stupid about it. That might mean some floating, some clearing, some relative positioning, who knows.

...

Sure, that's possible. I've seen that on some sites. I'll have to either find an example, or go cook up some css of myselfâ„¢.

Omnutia

The moment myself and Your Mom walk into a conversation, things get complicated.
Well I think I'll just stick to cropping images manually. Problem is that cropping an image means editing it which is against some variants of the CCL.

...

The moment myself and Your Mom walk into a conversation, things get complicated.

Bah, Your Mom is only halfway there, your mom however has already arrived.

All clear, have fun.

Now, as for the solution to your question, it depends upon your needs, I'll try to indicate where choice is possible.

This is the html.
<div id="foobar" style="*¹">
<span>[Insert your alternative text here, example: "Image of a cat."]</span>
</div>
Of course you can name the div whatever you want, use something useful, like 'cropped-image' or something.
And here we have the css.
#foobar {
width:[Put your desired standard-width of the cropped image here];*²
height:[Put your desired standard-height of the cropped image here];*²
margin:0; // You can change margin and padding according to taste if I'm correct.
padding:0;
}

#foobar span{
visibility:hidden;
}
*¹: Now here you put the good stuff. Since we're only going to use the background style definition in this style tag for now, let's put it in.
<div id="foobar" style="background:;"></div>Now we need values in there for it to actually work, first a background image:<div id="foobar" style="background: url([link to image]);"></div>We don't want it to repeat itself, so for safety we'll throw no-repeat in there:<div id="foobar" style="background: url([link to image]) no-repeat;"></div>And now the fun stuff, to offset the image as to not just show the top left, but the 'interesting' part of the image (say, crop the goatse image to... yes, that), we will need one, or two values. The first value will offset the image on the horizontal plane, and the second will offset it on the vertical plane. So, to 'move' the visible area to the bottom right of the image you'd use the values: cropped-image width minus full-image width px, and cropped-image height - full-image height px. This will result in two negative numbers. Now we'll have ended up with something like this:<div id="foobar" style="background: url('cat.png') no-repeat -50px -100px;"></div>

*²: If you wish to use different dimensions for a cropped image, just put add the new width and height to the style tag in the div. You will get something like this:<div id="foobar" style="background: url(\'cat.png\') no-repeat -50px -100px; width: 150px; height: 250px;">
<span>Image of a cat.</span>
</div>
Tell me if that helped you, or if anything is unclear.

Omnutia

Ok, I've been trying this out and have a question and a few problems:
What does ";*²" at the end of the height and width styles do? (I know what ";" does).
Problems: I get the width but no height and the words "a picture of a cat" are still visible.
Also, can I scale the images as well?

...

What does ";*²" at the end of the height and width styles do? (I know what ";" does).

. . . It's a footnote. You leave those out. You need to replace the first footnote with the stuff described there though. The text should be hidden, have you modified the #foobar span { statement correctly?

I'll see if I can think of a way to scale the images. But first copy the first stuff correctly.

Omnutia

Here's the CSS file. Did I do anything wrong?

Apreche

Here's theCSS file. Did I do anything wrong?

You made it very hard to read.

Omnutia

Scroll to the bottom. That's just the way it came.

...

Here's theCSS file. Did I do anything wrong?

Nope, but one can't really tell with only half of the required material. Can you link an html page that uses that stylesheet and the div and span?

Also, as Scott said, Bob made it horribly unreadable. Most likely on purpose.

Omnutia

Oh, it works.. Now I just need to work out how to shrink a larger image to fit.
Also, is there a way of putting the "no-repeat" in the CSS stylesheet file? I just want to have as little in the posts as possible to make changes easier.

...

Good, now for scaling. We know that if we give the img tag a style attribute and give in smaller width than the actual image, browsers scale the image down. Let's use this knowledge!

This is what we had:

Image of a cat.

And this is what we want:

Here's the css:// For the first 'image' we had this css.
#foobar {
width:100px;
height:100px;
margin:0;
padding:0;
}
#foobar span{
visibility:hidden;
}

// For the scaled and cropped image we need this
#football {
width: 100px;
height: 100px;
margin: 0;
paddign: 0;
overflow: hidden;
}
#football img {
position: relative;
}And then the html:<!-- The first image -->
<div id="foobar" style="background: url('http://farm1.static.flickr.com/25/46121827_33deecf1ec.jpg')
[linecut against board wrap]no-repeat -200px -50px;">
<span>Image of a cat.</span>
</div>
<!-- And the second image -->
<div id="football">
<img src="http://farm1.static.flickr.com/25/46121827_33deecf1ec.jpg" style="width: 400;
[linecut]left: -150px; top: -40px;" alt="Image of a cat." title="Image of a cat." />
</div>Just remove the linecuts and make it one sentence again in your code. It's known that I hate horizontal scrolling, more so if it's due to text.

Hope that helps. Don't know how well either is supported in older browsers or old versions.

Omnutia

Ok, questions. Linecuts? what is it good for!
If I just set the image width will it change the height in proportion?

...

Ok, questions. Linecuts?what is it good for!

Just remove the linecuts and make it one sentence again in your code. It's known that I hate horizontal scrolling, more so if it's due to text.

GAH! I told you!

And yes, if you give a width, then:

browsers scale the image down.

Here some examples, the image is scaled down to 80%. That is 400px wide and 265.6px tall.

Width only:

Height only:

Width and height:


If you use Firefox you can right click each of those, select properties and see that each is scaled down to 400 by 266 pixels.

Omnutia

I'm tring to absorb a lot of information here. Will have a look at this tomorrow.

Omnutia

I'm back, thanks for helping last time. This time I'd like to know how to make the picture linked to the image's flickr page (or just linked in general).

...

Wrap <a> tags around the <img> tag. That should do exactly what you want, and confirm your hunch. Good luck.

Omnutia

I haven't yet moved over to using the resizable method. Any way to link the span version or will I have to go through and update everything?

...

I haven't yet moved over to using the resizable method. Any way to link the span version or will I have to go through and update everything?

Ugh, I think <a> tags around the <div> tag might work, but I doubt it, and if it did, it's ugly. And if you are not using the resizeable version, why did you request it? >:( *grumble grumble* Should've moved to the optional-resizeable code from the start. But yes, if you wish to add links to every image you cropped, you will have to update it to the optional-resizeable version of the code. You'll have to edit the post either way, so I don't see the problem in having to update all those.

Also, is there a way of putting the "no-repeat" in the CSS style sheet file? I just want to have as little in the posts as possible to make changes easier.

Did I ever read this? My bad, but yes, you can put the no-repeat statement in the proper style sheet with the other css for that <img> tag. But as you see, you do not need it for the optional-resizeable version of the code, so this info is out of date.

Omnutia

Flickr's medium size image is 500px wide always so I only need the resizable if I change my blog or use a non-Flickr image. I think from now on I'll switch to the resizable version so I can link the pictures.

...

Flickr's medium size image is 500px wide always so I only need the resizable if I change my blog or use a non-Flickr image. I think from now on I'll switch to the resizable version so I can link the pictures.

Even if you don't use the resizing (it's optional after all), using an <img> for images is always better than setting it as the background for something.