Howdy, @Regnalf! Thanks for writing in and for your questions regarding the Image Element and how to achieve certain results. It appears that there might still be some confusion on how certain features operate on the Element itself, so hopefully I can help to dispel any of those misconceptions in this post. 
First, the post you referenced above already addressed the fact that the user in that thread was attempting to use that particular feature improperly. I can assure you it works properly when applied in the correct manner.
Now, let’s take a look at the Image Element from a very base level. I will use my own example “logo” in this demonstration to closely mirror some of the things it looks like you’re trying to achieve, along with another example after to demonstrate some other features of Object Fit and Position. Here is my logo I’m working with:
Let’s work top-down: you can see from this screenshot that the Base and Maximum values for Width and Height are set to their default values, which effectively says that we are not manipulating the physical dimensions of the Image Element. You can also see from this screenshot under the Image control in the Retina & Dimensions line that our image is currently output at 110 x 60. These values in the Dimensions controls represent the actual dimensions of the image itself, which are currently scaled down by half to make them “Retina Ready.” If I inspect the markup of this image on the frontend of my site, you can see how this works:
Notice how these values have been output as width="110" and height="60" as attributes on the <img> Element itself. This is used to ensure that the Image takes up its appropriate space when the document loads and you don’t get any layout shifting happening from a delayed load of the asset. If we go back to our Builder and de-select the “Retina” control, we get the following result:
You can see that the Dimensions controls have appropriately updated to 220 for the Width and 120 for the Height, which is the actual, full-scale dimensions of this asset, which have not been halved to make it “Retina-ready.” And back on the frontend inspecting our Element, you’ll see how it updates the attributes accordingly:
Of course, the reason why we halve these dimensions by default is to make them not appear “fuzzy” (as my logo does in the screenshot above) on high pixel density devices; however, we do give users the option to disable this “Retina-ready” approach if they so desire. So to summarize all of this, the Dimensions control is just a way to reference an output the literal dimensions of the image asset you’re trying to output to avoid any potential layout shift in your document while assets are loading. However, these “literal” dimensions can be physically altered using the Base / Maximum controls for Width / Height found in the initial Setup control group on the Image Element.
So when we want to physically alter the appearance of an image in the document beyond its literal dimensions, we can do that from the Setup control group as mentioned previously. So from my example above, when my logo is “Retina-ready,” its dimensions are 110 x 60, but let’s say that for some reason I want to decrease the Height of my logo to 40px, we could do that by setting its Base or Maximum Height. For this example, I will set the Maximum Height value to 40px, like so:
You can see that the image asset does indeed become “scrunched” because we have physically manipulated the asset beyond its literal values output by the Dimensions control. However, there is a way to overcome this using the Object Fit control found at the bottom of the Image control group. By default, this control is set to fill, which is the default value specified for this property in the CSS spec. You will notice from the screenshot above that this is the value set here. But watch what happens when I update its value to contain:
We can see that the asset is now respecting the 40px height we have set above while also maintaining its intrinsic aspect ratio. The contain option effectively tells the asset to keep its aspect ratio even if its physical properties have been manipulated beyond its literal values. To see this better illustrated, I can set a background-color to my Image Element to see this at play:
Notice how the width is still 110px wide, which I’m getting from the Dimensions control, which is set as width="110" on the <img> element itself, but we are forcing the CSS height to be 40px to overwrite the base value of height="60" placed as an attribute on the <img> element.
Now, let’s discuss the Position input referenced in the thread you linked to at the beginning of this topic. That input is helpful for moving the focal point of the asset if its canvas has been physically altered. Let’s build off of the example we already have here and keep our highlighted image for reference. Currently its Position is set to 50% 50%, which means, “Place this asset at the center of the dimensions currently set.” However, if we wanted to move this logo to the far left of the dimensions we have set, we could update it to 0% 50%, because the first value is the X axis positioning of the asset and the second value is the Y axis positioning. Doing this would result in the following:
Conversely, we could move it to the right edge of the dimensions with 100% 50%:
Specifically addressing the “wrong size” of the container as you mentioned above, we do not apply width: auto to the img as you reference in your CSS due to the fact that our particular implementation of the Image Element features a wrapping span with the class of x-image, which is used to apply some additional styling if desired. There is a juggling act we have to perform with how the CSS from the controls gets applied to these two HTML elements (the span and the img) and the myriad of situations these Images can end up in with how different users will use them in specific instances.
While the asset does maintain its original X axis dimensions with an auto width as you can see from the red highlight, we can’t just apply auto as you’ve referenced since we have to be careful how we juggle these values because this Element is also used in many other contexts such as graphics, scaling images in the header, et cetera, so we do not automatically apply auto to the img to avoid conflicts in those other use cases. As with many other Elements in our library, not every control is a 1:1 representation of the CSS spec. Sometimes we have to abstract away multiple property permutations to one control to reduce complexity or make an Element more resilient across many varying contexts that a user might throw it into.
However, you can easily update this with a quick line of custom CSS if that is necessary for your purposes, but this is mostly an “invisible” reality as the Object Fit value being set to contain in your situation will alter the asset inside the physical dimensions how you want, and it will respond properly if the screen gets small enough. Personally, I would even say that for a situation like this where you’re physically altering the dimensions of something as exact as a logo, I would go ahead and set a maximum value for both dimensions like so to constrain it appropriately as desired:
To delve a little deeper on Object Position, where I find this most useful is situations where you have an actual photograph that you’d like to shift the focus on. Take for example the following image:
This photograph is currently “Retina-ready” at 300 x 400, but let’s say that I wanted to physically constrain the dimensions of this image to 200px x 200px with CSS:
Notice that doing this again results in a “scrunched” image, because our default Object Fit value of fill is currently set. In a situation like this, it is most likely that you would want to alter the Object Fit value to cover, which tells the image asset to always fill the physical dimensions set by CSS, which would result in the following:
You’ll notice that we have now eliminated the “scrunched” look of the image and it is filling out our 200px x 200px physical dimensions nicely; however, perhaps the subject’s face is a bit high for what we’re after. Once again, this is where our Position control comes to the rescue. To move the subject’s face down on the Y axis, we could adjust the Position value to 50% 0%, which effectively means that we’re placing the top of the actual asset at the top of the physical dimensions we’ve set, resulting in the following:
Hopefully this helps to dispel any misconceptions any users might have about the Image Element. Depending on the result you’re going for, you can most assuredly achieve that result using various combinations of the controls available.
Cheers!
, and Thanks
