How to maintain aspect ratio when showing background image?

[Crispy13]

let img_uri = "sososo.jpg";
egui::CentralPanel::default().show(ctx, |ui| {
            let img = Image::from_uri(img_uri).maintain_aspect_ratio(true);
            img.paint_at(ui, ui.ctx().screen_rect());
...

maintain_aspect_ratio(true) did not work.

and can I modify the opacity of the img?

[marci1175]

Hi!
I am not entirely sure why maintain_aspect_ratio doesn't work.
It is possible that egui doesn't know the size of the image. You can easily check if you call Image::size on img.

I could work around this issue by using the image crate (Which is a requirement if you want to load images in egui, so you don't have to add a new dependency), and a few manual calculations.

//Get available rect
let available_rect = ui.ctx().available_rect();
//Fetch available size
let available_size = available_rect.size();
//Opcaity
let opacity: u8 = 10;

//Loading the image bytes (You can use any other way you would like)
let img_src = include_bytes!("../image.jpg");

//Load image into memory
let img_mem = image::load_from_memory(img_src).unwrap();

//Fetch image size
let (width, height) = (img_mem.width(), img_mem.height());

//Get the image's aspect ratio
let img_aspect_ratio = width as f32 / height as f32;

//Get the final sizes of the imge
let img_width = available_size.x;
//Multiply with aspect ratio to maintain it
let img_height = img_width / img_aspect_ratio;

//Create egui image instance
let img = Image::from_bytes("image_uri", egui::load::Bytes::Static(img_src));

//Paint the image
img.tint(
    //Set opacity
    Color32::from_white_alpha(opacity),
)
//paint the tinted image
.paint_at(
    ui,
    egui::Rect::from_min_size(available_rect.min, Vec2::new(img_width, img_height)),
);

I also included the code to modify the opacity of image.
Feel free to ask questions about the code! :)