2-Column Flexbox Demo: Image & Editable Text
Image Upload
By default, the image fills its column using object-fit: cover.
Image Size (within column)
Current image width: 100%
If you resize below 100%, cover mode is disabled.
If you resize below 100%, cover mode is disabled.
Image Position
Affects both cropping (in cover mode) and alignment when resized.
Image Column Width
Image column: 50% |
Text column: 50%
Layout
This only changes visual order. All controls still affect the same image/text areas.
Demo
Loads a sample bedroom image and placeholder text.
Upload an image using the controls above or click “Load sample data”.
This is an example of editable text on the right-hand side. You can click here and start typing to replace this content with your own copy.
Try adding more paragraphs, deleting text, or pasting content. The area has a minimum height of 250px so the layout stays balanced.