mit Chrome-Tools arbeiten - und dynamisch Werte probeweise verändern?!

[Tanger]

Hallo und guten Abend,

wenn man mit Chrome / oder Vivaldi - eine Seite untersucht - dann kann man ja auch über die Werte die man in der Untersuchung findet, auch in das Site-Layout eingreifen. Meine Frage ist die - wie geht das nochmals genau. Auf welche Einstellungen /& Ansichten / Modi muss man hier achten:


Hab das früher schon des Oefteren mal gemacht - also mit dem Tool gearbeitet - und dabei gesehen, dass man hier wirklich sehen kann wie sich in dem Site-Layout Dinge ändern.
Also - nehmen wir z.B. mal das Layout einer Seite - also hier im Detail - die Größe eines Bildes.

Hier unten ein Beispiel:

Frage - wie kann ich das Bild in der Größe verändern -

<div id="main" class="site-main">
<div id="primary" class="content-area container" role="main">
<article id="post-16" class="post-16 page type-page status-publish has-post-thumbnail hentry">
<div class="entry-content">
<p>Welcome to your site! This is your homepage,</p>
<figure class="wp-block-image size-full is-resized"><img src="https://www.my-site.com/wp-content/uploads/2022/02/2022-02-25-11.03.06-page-8461643f6f1a.jpg" alt="background" class="wp-image-47" width="1044" height="489"></figure>
</div>
</article><!-- #post -->

Hintergrund: wenn ich das kann, ma.W. wenn ich das weiß wie das geht - dann kann ich auch herausfinden, wo ich das Bild in der DARSTELLUNG vergrößern.


Denn das Bild das ich hier einsetze - das ist in der Originalgröße ja so - groß

Rendered size: 397 × 184 px
Rendered aspect ratio: 397∶184
Intrinsic size: 1360 × 632 px
Intrinsic aspect ratio: 170∶79
File size: 74.7 kB

Freue mich auf einen Tipp - VG

 

[Xandros]

Ich sags mal mit zwei Antworten:
1) Im Image-Tag hast du die Grössenangaben

width="1044" height="489"

Allerdings ist das vom Stil her reichlich veraltet und gehört dort entfernt.
2) mit den statischen Grössenangaben unter 1 zerschiesst man sich die Idee, eine Webseite responsive zu machen und an die Displaygrösse anzupassen. Somit gehört das in eine CSS-Klasse. Hier bietet sich an, die im Image-Tag genannte Klasse

class="wp-image-47"

in der zugehörigen CSS zu suchen und darin die Größenangaben zu hinterlegen. Die Klasse selbst wird dann nicht nur einmal in der CSS vorhanden sein, sondern mehrfach - jeweils in den Media-Querys für die verschiedenen Bildschirmgrössen. Denn die harte Angabe der Grösse mit width/height im Bild-Tag wird für alle Displays angewendet und dürfte auf manchen kleinen Smartphones ggfs. schon dazu führen, dass dieses Bild breiter als das Display ist.

Um auf die Frage nach der Verwendung der Chrome-Tools zurück zu kommen:
bei dem genannten Quelltext hättest du also zwei Möglichkeiten. Einmal im angezeigten Quelltext selbst die unter 1) genannten Parameter verändern oder diese Angaben dort zu entfernen und die zum Image-Tag im Stil-Fenster gemachten Angaben zu modifizieren. (Hier wird allerdings nur das angezeigt, was gerade für die Darstellung über die aktive Media-Query - sofern überhaupt vorhanden - für das verwendete Display gilt.)

 

[Tanger]

Hallo und guten Tag Xandros,

vielen Dank für deine ausführliche Antwort. Die Erläuterungen zu CSS und den verschiedenen Bildschirmgrößen leuchten ein - und sind sehr hilfreich.

Vielen Dank!

Viele Grüße und ein schönes Wochenende,

Tanger 😉