resizing portrait images into landscape without cropping

[hdesigns]

I'm in a situation where I need to output an array of images in the exact same size.

So far, so good. With

$image->size(900, 600);

I can do this.

The problem is: If I do the exact same thing with a portrait image. It crops the top and the bottom.

I need to avoid this.

Is there any option to resize a portrait image into the landscape format and fill out the resulting blank space (on the left and right side) with a color providing the rgb- or hex-code?

I've attached an example image of what I want to achieve.

[LostKobrakai]

How about saving the user the wasted pixels and using this:

.wrapper {
	position: relative;
	background-color: #BADA55;
	padding-bottom: 56.25%; /* 16:9 (Adjust to your ratio)*/
	height: 0;
}
.wrapper .inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

<div class="wrapper">
	<div class="inner">
		<img src="…">
	</div>
</div>

[hdesigns]

In my particular case this doesn't work because I want to create a slider that is also responsive.

Next to the normal width of the slider I set the max-width to 100% to make sure the user can see the full image if the browser window with is smaller than the slider normally would be.

Now, if I have a portrait image in an array of landscape images the portrait image appears much higher than the other images because of the max-width 100%. This of course ruins the design...

I can't come up with a css-solution. There may be a js-solution but I'm not sure if I'm comfortable with it.

As far as I can see the php/pw solution would be not that bad. I admit there are some wasted pixels and this results in slower loading. If someone comes up with a better working solution I'm willing to adapt.

[LostKobrakai]

Maybe this fits your needs. Appeared just today on my twitter timeline. http://nicolasgallagher.com/flexible-css-cover-images/

[interrobang]

I think you can do this with the PIM module https://processwire.com/talk/topic/4264-release-page-image-manipulator/ The method you are looking for is canvas()

Having said that, I would probably do it with css if it is ok for you using a css background-image instead of a normal <img/>. You can position and scale background-images easily with css like this:

<style>
.slide {
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>

<div class="slides">
  <div class="slide" style="background-image: url(img.jpg)">Content Slide 1</div>
  <div class="slide" style="background-image: url(img.jpg)">Content Slide 2</div>
</div>

[hdesigns]

Thank you guys.

@interrobang: Your idea with the background image did the trick perfectly. Thanks so much!

I really don't know why I didn't came up with this. Now that I see it, it seems so obvious...

[interrobang]

I did not include any vendor prefixes. If you need to support old browser version you might want to add -moz and -webkit prefixes to background-size. And for IE8 you need a htc-polyfill https://github.com/louisremi/background-size-polyfill

 

And in the future you can use img { object-fit: contain; }

But unfortunately this is not ready for primetime: http://caniuse.com/#feat=object-fit