Image sizing in a blog post

Does anyone know how to size images in a blog post properly so that the image does not get cut off in mobile view?

I am specifically talking about images within a blog post and not the Post Image. 

The text seems to wrap in our blog posts in mobile view properly but images are cut off.

See example in mobile: https://community.arm.com/arm-community-blogs/b/graphics-gaming-and-vr-blog/posts/introducing-arm-accuracy-super-resolution 

  • The whole 'images in blog posts' thing could do with a rethink to be honest.

    I find it odd that you can align with text (which is just odd) or left or right of text (which again is odd unless you're really specific with the point of insertion and as for the wrapping, well that's down to pure luck. You can't add a 'caption' to the image and have that caption attach itself to the image for display purposes. If you want to caption it you have to align your text perfectly beneath it otherwise it ends up in a weird place when you view it on a different screen size/resolution/mobile device etc. And why can't you just align centre in the container so you could at least do a paragraph, centre aligned image. paragraph kind of format? 

    These questions and soooo much more..... Joy

    But seriously AnnieC back to your question. It's something we've experienced on our community too but I haven't seen it for a while. I'm not sure if that's just because we haven't added any images that go beyond the boundaries so to speak but it will be to do with the responsiveness of the image code i.e. using fixed pixel sizes for images rather than percentage size. For example an image set to 'width 100% will take up 100% of the available container width  but a fixed size of x1000 pixels will cause an image to overspill the available container size if the physical screen size is only 500 pixels. 

    Have a chat with your dev team and ask them to take a look at the responsive code Slight smile

    Hope that helps! 

    Lisa

  • Hi  

    I agree with Lisa here! Definitely some off behavior in a mobile view!  

    As Lisa mentioned, if you go into the RTE for the blog post and go to Tools --> Source Code --> You could hardcode an image to be set at width 100% so it does not exceed the available space (in desktop and mobile). 

    I also wonder if how the images are being inserted could have an impact. I.e. if an image is uploaded with pre configured dimensions - I would assume it always loads at those dimensions. However, if you insert clear out the dimensions before inserting an image in a Rich Text Editor - it will render at that image size (which may cause it to extend beyond the available space) 

    Example of Clearing Out the Dimensions: 

  • This is very helpful. Thanks for sharing. I agree. There are a lot of questions on this topic.