0

The goal I'm trying to achieve on my drupal 7 website is keeping an article image's border a certain size for all images (120x120) while the actual image themselves adjust according to the image style (100x100) and are middle aligned. (I'm unable to provide example images because I don't have 10 reputation points...)

So for a portrait image the height would be capped at say 100px and the width will be whatever is the aspect ratio is. Same thing in reverse with a landscape image, with the width being capped at 100px and the height being whatever the aspect ratio is.

All while the grey border stays a 120x120 block, and not changing according the image size.

Let me know if you need any code from my website to help with solving this.

Steve-o
  • 3
  • 1

1 Answers1

0

The simplest way to achieve your goal is to use table-cell display property with vertical-align: middle on the parent div, with desired border, height and width set. Than your img should have set max-width and max-height properties to 100%. So having the HTML structure like this:

<div class="img-container">
  <img src="..." />
</div>

Your CSS could be:

.img-container {
  width: 120px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
}

.img-container > img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: block;
}

Codepen showing the result: http://codepen.io/anon/pen/BpeOzG

Marcin
  • 1,426
  • 16
  • 19
  • Thank you very much for your suggestion. It nearly fixed the issue. It seems to have worked with the border but the issue of the image height remains. Have a look at the Fallout image near the bottom for an example here: [link](http://bargains24.co.za/new-deals) This is the CSS I input into the injector module: `code` .field-type-image { width: 140px; height: 140px; display: table-cell; vertical-align: middle; text-align: center; } .field-type-image > img { max-width: 100%; max-height: 100%; } – Steve-o Feb 17 '17 at 11:31
  • This is the CSS I input into the injector module: `.field-type-image { width: 140px; height: 140px; display: table-cell; vertical-align: middle; text-align: center; } .field-type-image > img { max-width: 100%; max-height: 100%; }` – Steve-o Feb 17 '17 at 11:37
  • You mean this extra space between the image and the border? If so, the reason is that by default image is rendered inline, it means that it seats on the same line as letters a, b, c, d, etc. while this extra space is for the descenders in letters like f, g, y. To solve the problem just add to `.img-container > img` `display: block;` and your problem will be solved. Here you can also find nice explanation about descenders: http://stackoverflow.com/questions/31444891/mystery-white-space-underneath-image-tag/31445364#31445364. – Marcin Feb 17 '17 at 12:12
  • No not at all, that extra space is what I was after to keep the image border consistent. The Fallout image is breaking this consistency by pushing the height up. I thought the image style setting in drupal would keep this down but it doesn't appear to work. Unless I'm doing something wrong. – Steve-o Feb 18 '17 at 11:08
  • @Steve-o either I don't get you right or there may be a problem with overriding styles. I checked my approach in codepen and placed the link in my answer, so you can see if it is your desired result. However after adding `display: block`, `text-align: center` on the parent should be replaced with `margin: 0 auto;` on the image itself. This change is also placed in the codepen. Please take a look and let me know if it is a solution of your problem. – Marcin Feb 18 '17 at 11:49