The property control should render a div for you in edit mode. This div should have a class which should get some min height and width by CSS.  Have you overridden anything in the rendering of properties, e.g. the ContentRenderer or any of the property type controls?  

Btw, I guess Image is a content reference? In that case the property control will render a span and just the name or ID of the content. For page references an anchor will be rendered.

Have a look in the Alloy templates how images are rendered in WebForms. Basically you need to render a partial control. Don't remember now, but maybe this is done automatically if you decorate the Image property in your content model with UI hint "image":

[UIHint("image")] // There is a constant for this as well, UIHints.Image.
public virtual ContentReference Image { get; set; }

Correct. It is a ContentReference with attribute UIHint(UIHint.Image)

        [Display(Name = "Image", Order = 90)]
        [UIHint(UIHint.Image)]
        public virtual ContentReference Image { get; set; }

To my knowledge, rendering is not being overridden.

I've tried with CssClass setting the img element to display block but no change.

You can see the actual ouput if you inspect the page (in the iframe) and not the overlay which you've attached above. Maybe that will give you some clues.

Yes, the element is there. I've enclosed the property woth div with a minimum height of 50px.

Is there something equivalent in Webforms to:

<div @Html.EditAttributes(x => x.CurrentPage.Image)>
<img src="@Model.CurrentPage.Image.FriendlyUrl()"/>
</div>

<EPiServer:Property PropertyName="Image" CustomTagName="div" runat="server" />

Is the equivalent.

Your MVC code might "fail" in on-page-editing, e.g. if you add a CSS class to the image in your code above, it will get lost when an editor changes the image. Why? Becuase when the image is rendered asynchronously the default display template for the UI hint "image" will be used, your code above will not be used. Just a tip :) Instead do this:

@Html.PropertyFor(x => x.CurrentPage.Image, new { CssClass = "yadayada" });

And then have a display template for "image" or ContentReference.

Instead of adding styling to a wrapping div, why are you not styling the image? Since it's image placement and size that will determine the editable area in the overlay.

I am styling the image. The css class image-block does just that. See image above. I added min-height to the wrapping div just to see if container lies there.

Ok, maybe this is browser-specific then. In Edge I get an broken image icon, which will take up some space. I guess Chrome will hide it completely. Then I would recommend creating a custom renderer for images, which will output a placeholder image when the property is null. You don't need to return an image URL, just a base64 encoded svg or small png. You should also set width and height attributes on the img element.

Ah, Chrome. I can see it now.  Ok, will return a static string if page is in edit mode and ContentReference is Empty.

Thanks.

Yes, Episerver should've handled this nicer OOTB :) But I guess most partners already have custom image rendering in place that will handle this case, and output a placeholder image in edit mode.