suchen
Fragen und Antworten Warum ist das iPhone nicht mit max-width: 100 % kompatibel?
Warum ist das iPhone nicht mit max-width: 100 % kompatibel?
P粉806834059 2023-09-02 17:24:50 Sicht 1021

0
<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>
Your Answer
einreichen

2 antwortet
0

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

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

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

2023-09-03 14:29:57

einreichen

0

检查你的选择器。

使用.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>
2023-09-03 09:25:14

einreichen

Hot Tools

Sammlung der Laufzeitbibliothek vc9-vc14 (32+64 Bit) (Link unten)

Sammlung der Laufzeitbibliothek vc9-vc14 (32+64 Bit) (Link unten)

Laden Sie die Sammlung der Laufzeitbibliotheken herunter, die für die Installation von phpStudy erforderlich sind

VC9 32-Bit

VC9 32-Bit

VC9 32-Bit-Laufzeitbibliothek für die integrierte Installationsumgebung von phpstudy

Vollversion der PHP-Programmierer-Toolbox

Vollversion der PHP-Programmierer-Toolbox

Programmer Toolbox v1.0 PHP Integrierte Umgebung

VC11 32-Bit

VC11 32-Bit

VC11 32-Bit-Laufzeitbibliothek für die integrierte Installationsumgebung von phpstudy

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen