CSS Image Rectangular Resizing to Square

[robertallen]

Hi all,

I’m having the worst time trying to take a rectangular image and make it square.

My images have to be in an and I can’t really manipulate the HTML code. All I can do is mess with the CSS code.

My problem exists on the 1st column of the rounded post thumbnails.

http://golfdigestplan.wpengine.com/

Here is my code:

.home-col1-other-posts .col1-thumbnail img {
height: 125px;
margin-bottom: 30px;
}
.col1-thumbnail img {
border-radius: 50%;
}

I’ve tried overflow: hidden and all kind of different hacks I found searching the web, but some of them have to do with making the image a background, of which I can’t do. It has to be an HTML element.

Any help would be greatly appreciated.

[shaneisme]

This image is extremely rectangular. If you don’t care how it’s going to crop, you’d have to make the following modifications:

.col1-thumbnail {
  position: relative;
  overflow: hidden;
  width: 125px;
  height: 125px;
}

.home-col1-other-posts .col1-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  width: 300px; /* adjust to your pleasure */
}

Notwithstanding the horrific class names and over-specificity, this should work sorta… you’ll need to mess with it a bit to get it right I bet. Or at least it’ll get you on the right track.

The right way to do this would be to update the markup of course, making them backgrounds with a size of cover, or – now that I’m thinking about it – keep them in a rectangular size and move the images above the text instead of making them thumbnails…

Or, you know… crop the images yourself…

[robertallen]

Thank you so much. I will give this a shot.

Unfortunately, cropping them each time just for thumbnails will be problematic, as they are going to be used for full page featured images at some point (it’s all in WordPress).

As far as horrific class names…what specifically do you mean? I did the CSS, so I just wonder if there’s a better way of naming CSS?

(I’m not being defensive, I’m eager to learn. CSS is my favorite thing to learn. I know when it comes to naming my classes and ID’s I am terrible at it. You should see my overspecifity on other sites, ha ha.)

[shaneisme]

Shame about cropping, that would solve all our issues :)

As far as naming rules, it would start by modifying the markup of course, but you want your code (in any language or markup) to be reusable and semantic.

Being reusable makes sense, right? The more reusable it is, the less code you have to write in the long term. So when you get so specific with things col1-thumbnail instead of just col-thumbnail or better yet thumbnail, you’re making things more difficult.

Semantic is a tough one, but think about writing code as if a murdering psychopath that knows where you and your family live will be editing it after you. The more sense it makes to a layperson that doesn’t know how to read code, the better it will be for everyone involved. Consider your example (I’m not using all the classes for sake of brevity):

<ul class="home-col1-other-posts">
  <li>
    <div class="col1-thumbnail">
      <a>
        <img>
      </a>
    </div>
  </li>
</ul>

To catch that <img> tag you’d have to do either .col1-thumbnail img, or since that’s not specific enough and .col1- is being used elsewhere for some reason (exactly my point), you have to go all the way with .home-col1-other-posts .col1-thumbnail img.

Side note: did you know a CSS parser goes from right to left? So when you put img it will get all the images, ok what’s next? .col1-thumbnail? Right, give me all the img‘s that are child to .col1-thumbnail. And so on. Granted, they’re really good at this nowadays, but it’s something to take into account.

What I might do instead:

<div class="other-posts home">
  <div class="column one-third">
    <a class="thumbnail-link">
      <img class="thumbnail">
    </a>
  </div>
</div>

Now, I can set up defaults for all the .thumbnail elements. And if I need some specificity for only those in the other posts that are on the home page and that’s it, I can do .other-posts.home .thumbnail to get really specific. Maybe even just .other-posts .thumbnail in case I want it site-wide and not on the home page.

The .column class, even someone that doesn’t know code might guess it’s 1/3rd width column… and you can use that far more places than col1 allows. What is col1 anyway? That’s semantics.

I didn’t mean to be so dramatic as to say the word “horrific”, I mean no offense and I’m glad you didn’t take any :)

[robertallen]

No, no offense taken. I’m glad you said that word. It helps me to learn when someone is blunt with me. I loved the way you put it about murdering psychopath, ha ha. I see what you mean. I’ve had to do a lot of specific child CSS classes when I shouldn’t have to.

.parent .child img

.parent .child h2

It also will help with the speed of loading a stylesheet.

It really clicked for me when you said “The more sense it makes to a layperson that doesn’t know how to read code, the better it will be for everyone involved.”, so I really need to change my thought process.

Thank you so much for everything! I will most definitely apply these practices in my future developments, of which I have a lot of them with my new job. I’d do it for this project, but unfortunately it’s a tad too late. Oh well, perhaps later down the road when workload is small.

Thank you again!

Robert

[shaneisme]

Cheers, let us know when you get stuck again… hope I was some help with getting things into production.

[Author]

Posts