<p>在我的网络浏览器中，如果压缩并且在我的Android手机上，100%的工作完美。但在iPhone上不是这样。</p> <p>对于图片，我通常使用max-width: 100%;，如果情况适合，使用width: 100%;或img-responsive。图片宽度大于600px，因此我将宽度设置为600px以在较大的设备上进行控制。</p> <pre class="brush:php;toolbar:false;">&lt;section class='section20'&gt; &lt;figure class=&quot;image&quot;&gt; &lt;img src=&quot;images/user-content/1/20221003160546.jpg&quot;&gt; &lt;/figure&gt; &lt;/section&gt;</pre> <p>CSS：</p> <pre class="brush:php;toolbar:false;">.section20 .image, .section20 img { width: 600px !important; max-width: 100% !important; }</pre> <p>添加!important或不添加都没有区别。格式化编辑器是CKEditor 5。它在处理代码中的类时非常严格。如果在代码视图中添加自定义类，当返回到格式化编辑器视图时，它将从figure中删除它。</p> <pre class="brush:php;toolbar:false;">&lt;figure class=&quot;image&quot;&gt; &lt;figure class=&quot;image my-custom-class&quot;&gt;</pre> <p>custom-class会被删除。</p>

.section20 .image,
.section20 img {
width: 35rem ; // 或者输入相应的rem值
max-width: 100vh ; 
}

.image img {
  width: 600px;
  max-width: 100%;
}

<section class='section20'>
  <figure class="image">
    <img src="https://dummyimage.com/600x400/000/fff">
  </figure>
</section>