🖼️ Object-Fit CSS Demonstration
+ +
+
+
+
+
+
+
+
+ object-none
+Image keeps original size, may overflow container
+
+ 
+
+ object-none
+
+
+
+
+ object-fill
+Image fills container, may distort aspect ratio
+
+ 
+
+ object-fill
+
+
+
+
+ object-contain
+Image fits inside container while preserving aspect ratio
+
+ 
+
+ object-contain
+
+
+ object-cover
+Image covers entire container while preserving aspect ratio
+
+ 
+
+ object-cover
+
+
+
+""".to_utf8_buffer()
diff --git a/flumi/Scripts/Network.gd b/flumi/Scripts/Network.gd
index 9678f9f..1f04040 100644
--- a/flumi/Scripts/Network.gd
+++ b/flumi/Scripts/Network.gd
@@ -37,10 +37,10 @@ func fetch_image(url: String) -> ImageTexture:
var load_error
# Load image based on content type
- if content_type.contains("png") or url.to_lower().ends_with(".png"):
- load_error = image.load_png_from_buffer(body)
- elif content_type.contains("jpeg") or content_type.contains("jpg") or url.to_lower().ends_with(".jpg") or url.to_lower().ends_with(".jpeg"):
+ if content_type.contains("jpeg") or content_type.contains("jpg") or url.to_lower().ends_with(".jpg") or url.to_lower().ends_with(".jpeg"):
load_error = image.load_jpg_from_buffer(body)
+ elif content_type.contains("png") or url.to_lower().ends_with(".png"):
+ load_error = image.load_png_from_buffer(body)
elif content_type.contains("webp") or url.to_lower().ends_with(".webp"):
load_error = image.load_webp_from_buffer(body)
elif content_type.contains("bmp"):
@@ -48,10 +48,10 @@ func fetch_image(url: String) -> ImageTexture:
elif content_type.contains("tga"):
load_error = image.load_tga_from_buffer(body)
else:
- print("Unknown or missing content-type. Attempting bruteforce converting across PNG, JPG and WebP...")
- load_error = image.load_png_from_buffer(body)
+ print("Unknown or missing content-type. Attempting bruteforce converting across JPEG, PNG and WebP...")
+ load_error = image.load_jpg_from_buffer(body)
if load_error != OK:
- load_error = image.load_jpg_from_buffer(body)
+ load_error = image.load_png_from_buffer(body)
if load_error != OK:
load_error = image.load_webp_from_buffer(body)
diff --git a/flumi/Scripts/StyleManager.gd b/flumi/Scripts/StyleManager.gd
index 9b6f752..bac6d76 100644
--- a/flumi/Scripts/StyleManager.gd
+++ b/flumi/Scripts/StyleManager.gd
@@ -14,8 +14,6 @@ static func parse_size(val):
if val.ends_with("%") or (val.ends_with("]") and "%" in val):
var clean_val = val.replace("[", "").replace("]", "")
return clean_val
- if val == "full":
- return null
return float(val)
static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement, parser: HTMLParser) -> Control:
@@ -34,6 +32,8 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
if element.tag_name == "input":
apply_input_border_styles(node, styles)
+ elif element.tag_name == "img":
+ apply_image_styles(node, styles)
# Unified font applying for label and button
if target and styles.has("font-family") and styles["font-family"] not in ["sans-serif", "serif", "monospace"]:
@@ -89,8 +89,14 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
if not element_styles.has("height"):
node.size_flags_vertical = orig_v_flag
else:
- # regular controls
- SizingUtils.apply_regular_control_sizing(node, width, height, styles)
+ if element.tag_name == "img" and SizingUtils.is_percentage(width) and SizingUtils.is_percentage(height):
+ node.size_flags_horizontal = Control.SIZE_EXPAND_FILL
+ node.size_flags_vertical = Control.SIZE_EXPAND_FILL
+ # Clear any hardcoded sizing
+ node.custom_minimum_size = Vector2.ZERO
+ else:
+ # regular controls
+ SizingUtils.apply_regular_control_sizing(node, width, height, styles)
if label and label != node:
label.anchors_preset = Control.PRESET_FULL_RECT
@@ -627,3 +633,21 @@ static func apply_input_border_styles(input_node: Control, styles: Dictionary) -
control.add_theme_stylebox_override("focus", style_box)
elif control is Button:
control.add_theme_stylebox_override("normal", style_box)
+
+static func apply_image_styles(image_node: Control, styles: Dictionary) -> void:
+ if not image_node is TextureRect:
+ return
+
+ var texture_rect = image_node as TextureRect
+
+ if styles.has("object-fit"):
+ var object_fit = styles["object-fit"]
+ match object_fit:
+ "none":
+ texture_rect.stretch_mode = TextureRect.STRETCH_KEEP
+ "fill":
+ texture_rect.stretch_mode = TextureRect.STRETCH_SCALE
+ "contain":
+ texture_rect.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT
+ "cover":
+ texture_rect.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_COVERED
diff --git a/flumi/Scripts/Tags/img.gd b/flumi/Scripts/Tags/img.gd
index 0e82b45..87226ca 100644
--- a/flumi/Scripts/Tags/img.gd
+++ b/flumi/Scripts/Tags/img.gd
@@ -1,11 +1,38 @@
extends TextureRect
-func init(element: HTMLParser.HTMLElement, _parser: HTMLParser) -> void:
+func init(element: HTMLParser.HTMLElement, parser: HTMLParser) -> void:
var src = element.get_attribute("src")
if !src: return print("Ignoring 📝 Object-fit Property Mapping
+
+
+ object-none: Godot's STRETCH_KEEP - Image keeps original dimensions
+object-fill: Godot's STRETCH_SCALE - Image stretches to fill container
+object-contain: Godot's STRETCH_KEEP_ASPECT - Image fits inside with preserved aspect ratio
+object-cover: Godot's STRETCH_KEEP_ASPECT_COVERED - Image covers container with preserved aspect ratio
+