hard_crop image thumbnail

I dont know if it is possible to crop images as you described.
But it might be possible with css, no hard crop image.

Suppose you have markup like:
<div class="container"><img src="yourimage.png" class="fitimage"></div>

Then css may look like:

.container {
  width: 300px;
  height: 300px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #fff;
}
.fitimage {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

Thank ikaring,
it’s a solution. But It will be better if it can auto ??

The best solution is to do both. Add an image size that’s 300×300, scaled, not cropped. This way the image is no larger than need be. Accomplish the white background through CSS as ikaring suggests. There’s no point in having the white area as image data.

If you really must have the white as part of the image, there may be a way through the graphics editor. Especially if your server has image magick. If GD, maybe not.

Thank @bcworkz and @ikaring