die Entwicklungstools von Chrome - richtig einsetzen und anwenden ...

  • Hallo und guten Abend Communnity :saint:


    wie ist das denn, also wenn man mit Chrome - 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:


    Also - die Frage ist die: Wie kann ich mit Chrome Sachen ausprobieren: 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 -


    Code
    <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="block-image size-full is-resized"><img src="https://www.my-site.com/content/uploads/2022/02/2022-02-25-11.03.06-page-8461643f6f1a.jpg" alt="background" class="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ß


    Zitat

    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


    Jobär :saint:

    joomla-fan :: OpenSource u. Linux-Fan; MX-Linux und Endeavour; Raspberry-Pi & Arduino. ;)

  • FIGURE.block-image IMG {

    min-width: 320px;

    height: auto;

    }


    oder


    .block-image IMG {

    width: 600px;

    height: auto;

    }


    oder


    ARTICLE .block-image IMG {

    max-width: 360px;

    height: auto;

    }


    wären drei Beispiele mit Änderung der Bildgröße über das CSS mit unterschiedlichen Selektoren. Was da am besten passt, musste selbst herausfinden.



    Schöner Artikel zu den DevTools hier:

    https://kulturbanause.de/blog/…20(Windows)%20%C3%B6ffnen.



    Gruß

    Pascal