Add css to IPython.display to make it 100% of parent

Question

I am displaying an image in a Jupyter notebook using the IPython.display library.

activeViewFromArray = ipywidgets.Output()
with activeViewFromArray:
    display(PIL.Image.fromarray(array))

How do I add css to it to allow me to make the width of the <img> generated by this display call to be 100% of the parent container?

If I inspect the page, I can easily make it 100% manually by updating the style of the <img> tag to be width:100%

However, if I just set that within the css file, all <img> tags get a 100% width.

Asked By: Kevin Sweeney

||

Source

Answer 1

Can be accopmplished by add a class to the parent and then accessing the img child of the parent in css

activeViewFromArray = ipywidgets.Output()
activeViewFromArray.add_class('img_array')

with activeViewFromArray:
    display(PIL.Image.fromarray(array))

CSS

.img_array img {
    width: 100%;
}

Answered By: Kevin Sweeney

Add css to IPython.display to make it 100% of parent

Question:

Answers: