在css中缩放带有阴影的图像答案

【问题标题】：scaling image with shadow in css在css中缩放带有阴影的图像
【发布时间】：2019-10-21 21:19:35
【问题描述】：

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

任何人都可以帮助扩展这个移动设备吗？

.img {
  width: 330px;
  height: 300px;
  border: 2px solid #fff;
  background: url(https://picsum.photos/330/300) no-repeat;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

&lt;div class="img"&gt;&lt;/div&gt;

这甚至是仅使用主要 CSS 来放置此类图像的最佳方式吗？

【问题讨论】：

这就是全部代码吗？
据我所知是的
好吧，尝试将宽度和高度值更改为更动态的测量单位，例如 %？
嗯，这对我不起作用，即使使用上面的示例，当更改为 % 时它对我也不起作用

标签： html css shadow

【解决方案1】：

这是你所追求的吗？

调整窗口大小以查看它的实际效果。

#imageContainer{
   position: relative;
    
   height: auto;
   width: 20vw;
 }

.img {
  height: 150px;
  width: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url(https://picsum.photos/330/300);
  background-repeat: no-repeat;
  background-position: center center;
  
  border: 2px solid #fff;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

<div id="imageContainer">
 <div class="img"></div>
</div>

【讨论】：

图片会显示在上面吗？因为我看到的只是一条阴影线
另外，如果您真的想控制所有内容在所有设备和屏幕尺寸等上的显示方式，请查看媒体查询和引导程序，我发现两者都有帮助:)
嘿，我真的很感激！这看起来很有效，作为参考，我将它与更高的图像一起使用，比如 H 600 x W460 ，我将它应用到我的网站和移动设备上，容器中的图像显示较少，如果这有意义吗？我应该将图像调整为更小的尺寸吗？然后上传它，或者我怎么能用更大的图像来解决这个问题
你能给我看一个你在说什么的例子吗？在这一点上，我想说你只需要在你的 css 中找到正确的值。