aalexandrov

Hey Ioanna,
Here is the image block without the Picture tag option enabled.
This image contains just a width as a additional change.
This image has all available options checked on the image.
Let me know if I can help you further with additional information

Best Regards,

Aleksandar

Hey,

Thank you for the response!

I will give it a try and share if everything my findings.

Best Regards,

Aleksandar

Hey @rfischmann,
I just want to explain what is happening with the code that was suggested from the other post.

The <picture> tag is not supposed to have any styling and display. It is used as a identifier for the browser to know what is going to do with <img> and <source>. One <picture> tag can have multiple <source> elements. This <source> elements might load different image for different resolutions or the same image with different sizes. In this link https://www.w3schools.com/tags/tag_picture.asp you can see the example that load different images depending on the width of the example box.

The other part of the suggested code

.wp-block-image img { 
box-sizing: border-box; 
height: auto; 
max-width: 100%; 
vertical-align: bottom; 
}

It more or less the baseline that all themes are using when displaying images.

The code that I gave you just takes the properties that are coming from the parent <picture> tag and adding them to the <img> tag something that should happen without using this code. The styling applied to the <picture> tag needs to go directly on the <img> tag. Additionally if you are using a specified height also I would update the code like this:

.wp-block-image img {
    width: inherit;
    height: inherit;
    object-fit: inherit;
    aspect-ratio: inherit;
}

Keep in mind this is a workaround for the time being. A good actual solution would be for the <img> tag to get the inline styling the is being added from Gutenberg image block
Hope this helps

Hey @rfischmann,

I have a suggestion for a small tweak that can help your case just a tiny bit. This code is just going to resize the images so that they fit accordingly.

.wp-block-image img {
    width: inherit;
    object-fit: inherit;
    aspect-ratio: inherit;
}

I’m going to give more details of the issue that we have. First I’m going to start with the version that is was working 6.3.1.

With the image here there is a width set to the image of 450px. What is happening is that the <img> tag is receiving the width attribute to it which resizes the image and it is also added to the <picture> tag.
With the image we have added height to the image. The and it appears to put it on the <img> tag as height attribute which is good.

This is what is happening after the 6.3.2 update (note: the same can be observed for newer version of WordPress):

The image has the same width added to it but this time the <img> tag doesn’t get the width or height attribute added to it. Instead it is being added only to the <picture> tag. This issue can be observed even more when we are editing an image in dashboard. The setting that we are setting there are being previewed and after a save this settings are not being visualized on the image.

A more in depth look of this issue. The current native core/image block supports: width, height, aspect-ratio, scale, border, border-radius. All of the mentioned attributes are being added to the <picture> tag and not the <img> tag that we have. It is an issue because if we add an image and give it a border of 4px and add border-radius of 30px. After a save this changes are going to be visible on the <picture> tag and it looks bad.

The ideal state of the matter:
If possible all the inline styling that is added to the <picture> tag goes to the <img> tag. Also if possible the width and height to be set to the <img> as HTML attributes.

Looking forward to your response!