Html css中带阴影的图像缩放

我在缩放带有阴影的图像时遇到问题。在桌面屏幕上，图片很好，但当它缩小到移动屏幕时，图片太大，会流到其他div上

有人能帮我扩展一下手机吗

.img{
宽度：330px；
高度：300px；
边框：2倍实心#fff；
背景：url(https://picsum.photos/330/300)不重复；
-moz盒阴影：10px 10px 5px#ccc；
-网络工具包盒阴影：10px 10px 5px#ccc；
盒影：10px 10px 5px#ccc；
-moz边界半径：25px；
-webkit边界半径：25px；
边界半径：25px；
}

---

这就是你想要的东西吗

调整窗口大小以查看它的运行情况

#图像容器{
位置：相对位置；
高度：自动；
宽度：20vw；
}
.img{
高度：150像素；
宽度：100%；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景图片：url(https://picsum.photos/330/300);
背景重复：无重复；
背景位置：中心；
边框：2倍实心#fff；
-moz盒阴影：10px 10px 5px#ccc；
-网络工具包盒阴影：10px 10px 5px#ccc；
盒影：10px 10px 5px#ccc；
-moz边界半径：25px；
-webkit边界半径：25px；
边界半径：25px；
}

这就是全部代码吗？据我所知，yesOk会尝试将宽度和高度值更改为更动态的测量单位，如%？嗯，这对我不起作用，即使是上面的示例，当更改为%时，它对我也不起作用。这张图上是否显示了您的图像？因为我在我的终端上看到的只是一条阴影线，也只是一个侧面，如果你真的想控制所有内容在所有设备和屏幕大小上的显示方式等，那么看看媒体查询和引导在过去我发现两者都很有帮助：）嘿，我真的很感激！！这看起来是可行的，作为参考，我正在使用一个更高的图像，比如说H 600 x W460，我把它应用到我的网站上，在手机上，容器中的图像显示得更少，如果这有意义的话？我是否应该将图像大小调整为较小的尺寸？然后上传它，或者我如何用一张更大的图片来了解它。你能给我举一个你所说的例子吗。在这一点上，我要说的是，你只需要在css中找到正确的值。