<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
2 antwortet
不要硬编码宽度和高度。使用rem或vw/vh(推荐)。
.section20 .image,
.section20 img {
width: 35rem ; // 或者输入相应的rem值
max-width: 100vh ;
}
表示此元素的高度等于视口高度的100%。
检查你的选择器。
使用.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>
Hot-Tools-Tags
Hot Questions
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln
2024-04-29 11:01:01
So zeigen Sie die mobile Version von Google Chrome an
2024-04-23 00:22:19
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht.
2024-04-19 15:37:47
Im übergeordneten Fenster erfolgt keine Ausgabe
2024-04-18 23:52:34
Wo gibt es die Kursunterlagen zum CSS-Mindmapping?
2024-04-16 10:10:18
Hot Tools
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-Laufzeitbibliothek für die integrierte Installationsumgebung von phpstudy
Vollversion der PHP-Programmierer-Toolbox
Programmer Toolbox v1.0 PHP Integrierte Umgebung
VC11 32-Bit
VC11 32-Bit-Laufzeitbibliothek für die integrierte Installationsumgebung von phpstudy
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Heißer Artikel
Prognose der zehn wichtigsten Trends auf dem Kryptowährungsmarkt im Jahr 2025: Wo ist der nächste Trend?
2025-11-07
By DDD
Wie erkennt man die einheimischen Hundeprojekte im Währungskreis? Vermeiden Sie die Fallen und Risikowarnungen von Zerocoin
2025-11-07
By DDD
Was tun, wenn Win10-Schriftarten nach der Installation und Identifizierung von Win10-Schriftarten nicht in der Software gefunden werden können?
2025-11-07
By DDD





