How to show photos in containers without ghosting

Using Streamlit
, ,
1

I follow the relevant API for the combination of columns and container methods, but when I added an image, the image displayed in the page is ghosted, but when the mouse is placed on the image, the ghosting disappears, how to deal with that？

my code：

col1, col2 = st.columns((3, 1.3))

with col2:
    st.markdown(
        f"""
        <div style="margin-bottom: 0; font-size: 28px; font-weight: bold; font-family: 宋体, sans-serif;color:white;">电影简介：</div>
        <div style="overflow-y: scroll; color:white; font-family: 宋体; height: 150px; border: 1px solid rgba(49, 51, 63, 0.1); border-radius: 1rem; padding: calc(1em - 1px); background-color: rgba(255, 255, 255, 0.2);">
            <p style="margin-bottom: 0;">{induction}</p>
        </div>
        """,
        unsafe_allow_html=True
    )
    st.divider()
    st.markdown(
        f"""
        <div style="margin-bottom: 0; font-size: 28px; font-weight: bold; font-family: 宋体, sans-serif;color:white;">猜你喜欢：</div>
        </div>
        """,
        unsafe_allow_html=True
    )
    row1 = st.columns(3)
    for col in row1:
        tile = col.container(height=150)
        tile.image("images/hot.jpg", use_column_width=True)

version:
python-3.9
streamlit-1.32.2

The code does not show any errors

my web-page shows like…

wx_camera_1711985772909
wx_camera_17119857729091080×1920 237 KB

2

I was not able to replicate the issue.

image
image1088×596 54.4 KB

4

Could you tell me the size of your image？
I guess that’s becausemy size of image maybe is too large,maybe.

5

It was fairly big:

$ identify cat1.jpg 
cat1.jpg JPEG 2392x2500 2392x2500+0+0 8-bit sRGB 638682B 0.000u 0:00.000

I also tried with horizontal images and with a number of https://placebacon.net/ combinations

7

I got it. my image: 5000x7000 and I changed its size, then everything is okay. Thank you very much

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.