Responsiveness

[Taiwo_Osunrinde]

How can I ensure that my image is responsive to screen size

def img_to_bytes(img_path):
img_bytes = Path(“C:/Users/taiwo/Desktop/image.jfif”).read_bytes()
encoded = base64.b64encode(img_bytes).decode()
return encoded

header_html = “”.format(
img_to_bytes(“header.png”)
)
st.markdown(
header_html, unsafe_allow_html=True,
)

[jrieke]

Hey @Taiwo_Osunrinde,

you can use st.image(..., use_column_width=True) to stretch your image to the width of the surrounding container. This will be responsive, i.e. if the container resizes on a smaller screen, the image will also resize. Does this work for you or do you want to do anything else? Would be great to see some screenshots or sketches, so I can figure out how we can best support that.

Cheers, Johannes

[Taiwo_Osunrinde]

I am new to streamlit… can you help with how the code will be considering what i have above

[Taiwo_Osunrinde]

this is what i currently have

[jrieke]

You don’t need to do the conversion to bytes if you just want to show an image. Just do:

st.image(“C:/Users/taiwo/Desktop/image.jfif”, use_column_width=True)

(You don’t have to use use_column_width obviously). Also have a look at the docs for st.image.