<p>In meinem Webbrowser, wenn es komprimiert ist, und auf meinem Android-Telefon funktioniert es zu 100 % perfekt. Aber nicht so auf dem iPhone. </p> <p>Für Bilder verwende ich normalerweise max-width: 100 %; und gegebenenfalls width: 100 % oder img-responsive; Die Bildbreite ist größer als 600 Pixel, daher habe ich die Breite zur Kontrolle auf größeren Geräten auf 600 Pixel eingestellt. </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 { Breite: 600px !important; maximale Breite: 100 % !important; }</pre> <p>Es macht keinen Unterschied, ob Sie !important hinzufügen oder nicht. Der Formatierungseditor ist CKEditor 5. Beim Umgang mit Klassen in Ihrem Code ist es sehr streng. Wenn Sie in der Codeansicht eine benutzerdefinierte Klasse hinzufügen, wird diese aus der Abbildung entfernt, wenn Sie zur formatierten Editoransicht zurückkehren. </p> <pre class="brush:php;toolbar:false;"><figure class="image"> <figure class="image my-custom-class"></pre> <p>custom-class wird gelöscht. </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>