Crop rectangular images into a circle?

Using Streamlit
4

@cjimmy
Here’s a video demo for how to do it:

And this is the code to test things out.

st.markdown("""
  <style>
    // this is for all img elements in the Streamlit div class nesting a img
    .css-1v0mbdj > img{
      border-radius: 50%;
    }
  </style>
""", unsafe_allow_html=True)

st.markdown("""
  <style>
    // this is a specific element selector (the second shin chan image)
    div.css-ocqkz7:nth-child(6) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > img:nth-child(1) {
            border-radius: 50%;
    }
  </style>
""", unsafe_allow_html=True)

Use one or the other,

NOTE: There are ways in CSS to select elements either in odds or pairs, if you have a long list of images and want to select/highlight…etc always the second one in a div for example you can do so, check nth-child properties.

3 Likes