Hello,

I have a fluid image width shadow and a wave effect on click (which toggles the image source).

<div class="view overlay hm-white-slight z-depth-1-half">
<img src="/img/index_sample0A.jpg" class="img-fluid" style="margin: 0 auto" alt="">
<div class="mask waves-effect waves-light" onclick="toggleSample(0)"></div>
</div>

This works fine only when the screen width is smaller than the image width. But if the screen is wider than the native image pixel width, the shadow box stays at the screen width, and only the image is centered within this shadow box. I than have a screenwide shadowbox with a centered image within.

How is it possible to center the whole thing so that the shadow always has exactly the same size as the image and does not get wider than the native image pixel width?

Thanks!