<p>In my web browser, if zipped and on my Android phone, 100% works perfect. But not so on iPhone. </p> <p>For images, I usually use max-width: 100%;, and if appropriate, width: 100%; or img-responsive. The image width is larger than 600px, so I set the width to 600px to control on larger devices. </p> <pre class="brush:php;toolbar:false;"><section class='section20'> <figure class="image"> <img src="images/user-content/1/20221003160546.jpg"> </figure> </section></pre> <p>CSS:</p> <pre class="brush:php;toolbar:false;">.section20 .image, .section20 img { width: 600px !important; max-width: 100% !important; }</pre> <p>It makes no difference whether you add !important or not. The formatting editor is CKEditor 5. It's very strict in how it handles classes in your code. If you add a custom class in code view, it will remove it from the figure when you return to the formatted editor view. </p> <pre class="brush:php;toolbar:false;"><figure class="image"> <figure class="image my-custom-class"></pre> <p>custom-class will be deleted. </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>