How to Retain the Aspect Ratio of an Image While Resizing

Environment: VC6

I needed a way to display images full screen but I did not want the image to change its aspect ratio since that would distort its shape. If the image was very narrow it would expand to fill up the whole width of the screen making the image look too wide.

To fix this I wrote a function that will calculate the rectangle that will be needed. If you stretch the image to fit in the rectangle it will expand the image to fill as much of the screen as possible without changing the aspect ratio of the picture.

The function has three parameters. First is the rectangle that you want the image to fill. The second is the size of the picture. The last parameter tells the function whether you want the image to be centered in the rectangle or not.

The function returns a rectangle that you use to stretch the image.

CRect SizeRectWithConstantAspectRatio( CRect* rcScreen,
                                       CSize sizePicture,
                                       BOOL bCenter)
{
  CRect rect(rcScreen);
  double dWidth = rcScreen->Width();
  double dHeight = rcScreen->Height();
  double dAspectRatio = dWidth/dHeight;

  double dPictureWidth = sizePicture.cx;
  double dPictureHeight = sizePicture.cy;
  double dPictureAspectRatio = dPictureWidth/dPictureHeight;

  //If the aspect ratios are the same then the screen rectangle
  // will do, otherwise we need to calculate the new rectangle

  if (dPictureAspectRatio > dAspectRatio)
  {
    int nNewHeight = (int)(dWidth/dPictureWidth*dPictureHeight);
    int nCenteringFactor = (rcScreen->Height() - nNewHeight) / 2;
    rect.SetRect( 0,
                  nCenteringFactor,
                  (int)dWidth,
                  nNewHeight + nCenteringFactor);

  }
  else if (dPictureAspectRatio < dAspectRatio)
  {
    int nNewWidth =  (int)(dHeight/dPictureHeight*dPictureWidth);
    int nCenteringFactor = (rcScreen->Width() - nNewWidth) / 2;
    rect.SetRect( nCenteringFactor, 
                  0,
                  nNewWidth + nCenteringFactor,
                  (int)(dHeight));
  }

  return rect;
}

This is an example of how to use this function. I used the CPicture class from CodeGuru but you could use a normal CBitmap class and use CDC::StretchBlt for the same effect.

void CMyWnd::OnPaint() 
{
  CPaintDC dc(this); // device context for painting
  CString strSize;

  CPicture picture;
  picture.Load(m_strPicturePath);
  // Get Picture Dimentions In Pixels
  picture.UpdateSizeOnDC(&dc);

//Get the dimensions of the screen
  CRect rcScreen( 0, 0, 
                  GetSystemMetrics(SM_CXSCREEN),
                  GetSystemMetrics(SM_CYSCREEN));

  //Get dimensions of Image
  CSize sizePicture(picture.m_Width, picture.m_Height); 

  //Create a black background
  CBrush backBrush;
  backBrush.CreateSolidBrush(RGB(0,0,0));
  dc.FillRect(&rcScreen, &backBrush);

  CRect rcNewPictureRect = 
        SizeRectWithConstantAspectRatio(&rcScreen,
                                        sizePicture,
                                        TRUE);
  picture.Show(&dc, rcNewPictureRect);
}

Downloads

Download demo project - 29 Kb