How do I ensure an image always fits within the window, regardless of its size?

Question

Ryan McCombe · Accepted Answer

Ensuring that an image always fits within the window, regardless of its size, is a common requirement in many applications. This involves scaling the image while maintaining its aspect ratio. Here's how you can implement this in SDL2:

1#include <SDL.h>
2
3#include <algorithm>
4#include <iostream>
5
6class ScalableImage {
7public:
8  ScalableImage(const char* file) : surface{
9    SDL_LoadBMP(file)} {
10    if (!surface) {
11      std::cerr << "Failed to load image: " <<
12        SDL_GetError() << '\n';
13    }
14  }
15
16  void RenderFit(SDL_Surface* destSurface) {
17    if (!surface || !destSurface) return;
18
19    // Calculate scaling factors
20    float scaleX = static_cast<float>(
21      destSurface->w) / surface->w;
22    float scaleY = static_cast<float>(
23      destSurface->h) / surface->h;
24    float scale = std::min(scaleX, scaleY);
25
26    // Calculate new dimensions
27    int newWidth = static_cast<int>(surface->w *
28      scale);
29    int newHeight = static_cast<int>(surface->h
30      * scale);
31
32    // Calculate position to center the image
33    int x = (destSurface->w - newWidth) / 2;
34    int y = (destSurface->h - newHeight) / 2;
35
36    SDL_Rect srcRect{
37      0, 0, surface->w, surface->h};
38    SDL_Rect destRect{
39      x, y, newWidth, newHeight};
40
41    SDL_BlitScaled(surface, &srcRect,
42                   destSurface, &destRect);
43
44    std::cout << "Rendered at: x=" << destRect.x
45      << ", y=" << destRect.y
46      << ", w=" << destRect.w << ", h=" <<
47      destRect.h << '\n';
48  }
49
50  ~ScalableImage() {
51    if (surface) SDL_FreeSurface(surface);
52  }
53
54private:
55  SDL_Surface* surface;
56};
57
58int main() {
59  SDL_Init(SDL_INIT_VIDEO);
60
61  SDL_Window* window =
62    SDL_CreateWindow("Fit Image to Window",
63                     SDL_WINDOWPOS_UNDEFINED,
64                     SDL_WINDOWPOS_UNDEFINED,
65                     640, 480,
66                     SDL_WINDOW_RESIZABLE);
67  SDL_Surface* screenSurface =
68    SDL_GetWindowSurface(window);
69
70  ScalableImage img{"example.bmp"};
71
72  bool quit = false;
73  SDL_Event e;
74
75  while (!quit) {
76    while (SDL_PollEvent(&e) != 0) {
77      if (e.type == SDL_QUIT) {
78        quit = true;
79      } else if (e.type == SDL_WINDOWEVENT &&
80        e.window.event ==
81        SDL_WINDOWEVENT_SIZE_CHANGED) {
82        screenSurface = SDL_GetWindowSurface(
83          window);
84      }
85    }
86
87    SDL_FillRect(screenSurface, nullptr,
88      SDL_MapRGB(screenSurface->format,
89        255, 255, 255));
90    img.RenderFit(screenSurface);
91    SDL_UpdateWindowSurface(window);
92  }
93
94  SDL_DestroyWindow(window);
95  SDL_Quit();
96
97  return 0;
98}

This example introduces a ScalableImage class with a RenderFit() method that scales the image to fit within the window. Here's how it works:

We calculate scaling factors for both width and height.
We use the smaller of these factors to maintain the aspect ratio.
We calculate the new dimensions based on this scale factor.
We center the scaled image within the window.
We use SDL_BlitScaled() instead of SDL_BlitSurface() to perform the scaling.

The key part is in the RenderFit() method:

1float scaleX = static_cast<float>(destSurface->
2  w) / surface->w;
3float scaleY = static_cast<float>(destSurface->
4  h) / surface->h;
5float scale = std::min(scaleX, scaleY);
6
7int newWidth = static_cast<int>(surface->w *
8  scale);
9int newHeight = static_cast<int>(surface->h *
10  scale);

This ensures that the image is scaled to fit either the width or height of the window, whichever is smaller, thus guaranteeing it always fits.

In the main() function, we've made the window resizable and added an event loop to handle window size changes. This allows us to demonstrate that the image continues to fit even as the window is resized.

Remember that SDL_BlitScaled() might not provide the highest quality scaling for all types of images. For more advanced scaling techniques, you might want to consider using SDL2's rendering API with SDL_RenderCopy(), or a dedicated image processing library.

This technique is useful for:

Creating responsive UIs that adapt to different screen sizes
Implementing "fit to screen" functionality in image viewers
Displaying background images that always cover the entire window
Creating scalable game UIs that work across different resolutions

Cropping and Positioning Images

Fitting an Image to Window in SDL2

Cropping and Positioning Images

Game Development with SDL2

Questions & Answers