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,
)
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
I am new to streamlit… can you help with how the code will be considering what i have above
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.