Umbraco v9 Bootstrap 响应式图像不起作用

Question

在使用带有 Bootstrap3 和默认 StarterKit 主题的 Umbraco V9 遇到一些问题后，图像不会显示对某些屏幕尺寸的响应。

这里有一些可能的解决方案如何解决这个特定问题：

1.检查下面附上的图片，看看没有响应类的标准 Bootstrap4。

[![enter image description here][1]][1]

2. 在您的 Umbraco 项目解决方案中找到文件 (wwwroot\css\umbraco-starterkit-style.css) 并创建以下规则并保存文件：

    .responsive {
        width: 100%;
        height: auto;
    } 
   

3. 找到文件“\Views\Partials\grid\editors\media.cshtml”并在#57 行周围添加以下代码：class="responsive"。

4. 现在我们已经解决了整个网站的所有响应格式的图像，这个问题的结果也解决了。

我希望这有助于并节省大量使用 Umbraco 响应式图像设置的时间！

玩得开心！

Answer 1

img.responsive  {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* or contain; */
}