停止动态显示的右滚动图像

Question

我正在创建一个应用程序来创建博客文章并显示它们。
博客的内容以及图像数据以字符串形式存储为 HTML 内容。在我的 Angular 应用程序中检索后，我正在执行以下操作：
<div class="contentBox" [innerHTML]="post?.content"></div>

现在我正在尝试将我的图像包装起来以适应在移动视图中查看时的屏幕，但它总是会正确滚动。 （如图所示）

为了停止滚动，我试过了

img {
  margin: auto;
  max-width: 100%;
}

当我使用 Inspect Element 尝试它时它工作得很好，但是当我将它添加到我的代码中时，它就不起作用了。我是这样添加的：

.contentBox img {
      margin: auto;
      max-width: 100%;
    }

我应该如何在我的代码中使用此功能？

Answer 1

尝试使用max-width: 100vw; 而不是100%。

视口是网页的用户可见区域。

视口因设备而异，在移动设备上会更小 手机而不是电脑屏幕。

参考：https://www.w3schools.com/css/css_rwd_viewport.asp