suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum ist das iPhone nicht mit max-width: 100 % kompatibel?

<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>
P粉806834059P粉806834059522 Tage vor782

Antworte allen(2)Ich werde antworten

  • P粉145543872

    P粉1455438722023-09-03 14:29:57

    不要硬编码宽度和高度。使用rem或vw/vh(推荐)。

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

    表示此元素的高度等于视口高度的100%。

    Antwort
    0
  • P粉604507867

    P粉6045078672023-09-03 09:25:14

    检查你的选择器。

    使用.section20 .image指定img包装器保持在600px,并且不会随max-width: 100%;而调整大小。

    改用.image img

    .image img {
      width: 600px;
      max-width: 100%;
    }
    <section class='section20'>
      <figure class="image">
        <img src="https://dummyimage.com/600x400/000/fff">
      </figure>
    </section>

    Antwort
    0
  • StornierenAntwort