How to show photos in containers without ghosting

[zhangjingqi872]

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…

[edsaac]

I was not able to replicate the issue.

[zhangjingqi872]

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

[edsaac]

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

[zhangjingqi872]

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