Skip to main content

"Cropped" images via CSS only

Had this problem on a site recently. There was an area where a variety of images could show up, dynamically pulled from a datbase. The images were of a fair variety of dimensions - all the same general size, but no exactly the same.

The variety of dimensions made the area look bad - and simply forcing them to the same dimensions led to distorted looking images. At the same time it wasn't feasible to resize or crop them either automatically or manually.

The solution I came up with was to simulate a cropping effect. I came up with a good "ideal" dimension. Say it's 100x100. The images themselves are in a grid of table cells.

First, I fixed the table cell size at 100x100. Then, rather than placing the image inside the table cell as would be standard, I set it as the background for the table cell, and just put a "&bsp;" in the table cell (so it's not empty).

This makes it so that the table cell displays the image as a background - any parts of the image that exceed the 100x100 dimensions are not shown. But if for example the image is narrower (say 90x100) then it won't fill out the 100x100 enclosing table cell.

To fix this, I set the background color for the cells to black. Then I set the background position to "center center".

Here's the basic css code:


  td.thumbnail { 
    width: 100px;
    height: 100px;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center center;
  }


Here's the html for a single table cell. You have to use inline styles to set a different background image for each cell.


  <td class="thumbnail" style="background-image: url([the image]);">
    &nbsp;
  </td>

Comments

Post a Comment

Popular posts from this blog

Another VI tip - using macros, an example

God I love VI. Well, actually, vim but whatever. Here's another reason why. Suppose you need to perform some repetitive task over and over, such as updating the copyright date in the footer of a static website. (Yes, yes I know you could do a javascript thing or whatever, just bear with me.) Of course you could just search and replace in some text editor, changing "2007" to "2008" (if you're stupid) - and you'll end up with a bunch of incorrect dates being changed, most likely. What you need to do is only change that date at the bottom. And suppose that because of the formatting, you can't use the "Copy" part of the string in a search replace - perhaps some of the pages use "©", some spell out "Copyright" etc. This is where vi macros come in handy. A macro in vi is exactly what you expect, it records your actions and allows you to play them back. To start recording, press q followed by a character to use to "stor...
6 comments
Read more

Using FIle FIlters in FileZilla

Here's a handy tip for situations when you want to download a large number of files - but only of a certain type. For example, perhaps you want to download all the PHP files from a largish website, scattered through many subdirectories. Perhaps you're making a backup and don't want any image files, etc. FileZilla (still the best FTP in my opinion) has a handy feature called filename filters - located under the Edit menu. Here you can set various filters that filter out files based on their filename. Took me a minute to figure that out - you're saying show only PHP files, rather you're saying filter out files that do not have ".php" as their suffix. For some reason, that seems a little backwards to me, but whatever. It works quite well. You can also check whether the filter applies only to files, only to directories - or both. In this example, you'd want to check only files, as otherwise you won't see any directories unless they happen to end in...
1 comment
Read more

Cleaning content from OpenOffice using Perl

Open office is great software for a number of things - I use it as my office software instead of paying a premium for Microsoft office. But one thing it's not so hot at is converting documents to clean HTML. And one of the main things I use it for is adding content to sites that clients send me in word files or excel spreadsheets. Of course, you can always cut and paste, but that loses a lot of formatting. For example, if the content uses a lot of italics, bold text, etc. it can be a huge pain to go back and put all that back in. Another common situation is a client sending some sort of tablular data in a spreadsheet - for example a list of events. It's the kind of data that can change a lot, and it also needs to be in a table with some decent formatting to be usable. Doing it manually is a lot of grunt work. But grunt work is what computers excel at, and I'm not very good at. So I've developed a number of perl scripts to help streamline this kind of job. I'll go ...
3 comments
Read more