Timak97: Bilder auf Homepage an Smartphone anpassen

problematische Seite

Hallo,

ich habe das Problem, dass ich es einfach nicht hinbekommen, dass die Bilder auf der o.g. Seite sich auf einem Smartphone an die Größe anpassen. Die Größe der Texte und Titelbild etc. passt. Aber die Bilder behalten immer die Originalgröße.

Die Bilder habe ich wie folgt in die Seite eingefügt:


<section class="spalte1">
            <h2>Referenzen</h2>
		
            <img src="img/Cockpit.jpg">
            <img src="img/Sitze.jpg">
            <!--<img src="img/Lederpflege.jpg">-->
            <img src="img/Hundehaar.jpg">
            <img src="img/Lueftung.jpg">
            <img src="img/Tuerpappe.jpg">
            <img src="img/Tuerpfalz.jpg">
            <img src="img/Gitter.jpg">
            <img src="img/Motorraum.jpg">
            <img src="img/Entfettende Tankstutzenreinigung.jpg">

			<p>
			
            <a href="Referenzen.html" title="Referenzen">nach oben</a>
        </section>

Und in der Style.css habe ich die class wie folgt definiert:

@media (min-width: 50em) { 
  main {
    grid-template-columns: repeat(3, 1fr);
 } 
    .spalte1 {
    grid-row:    2 / 3;					
  }

    
	.spalte1 img {
     	width: 180%;
		height: 80%px;
		margin-bottom: 30px;
  } 
  
	.spalte1 img:hover{
     	width: 200%;
		height: 100%px;
		transition: 2s;
	}
	
}  
  1. problematische Seite

    @@Timak97

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. problematische Seite

      @Gunnar Bittersmann in wie fern ein Online Beispiel?

      Die 2 benötigten Dateien Online stellen? / Kann ich die hier hochladen?

      Die Problematische Seite habe ich bereits verlinkt.

      Bin neu hier, sry wenn ich auf dem Schlauch stehe..

      1. problematische Seite

        @@Timak97

        Die Problematische Seite habe ich bereits verlinkt.

        Sorry, mein Fehler Fehler des Forum-Designs: der Link wird immer wieder übersehen.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. problematische Seite

    Hej Timak97,

    Benutze Pixel oder Prozent 😉

    Marc

    1. problematische Seite

      @marctrix Hatte es schon mit nur % angepasst, sodass es auf dem PC passt. Auf dem Smartphone ändert sich das Bild überhaupt nicht, dass ist was mich so wundert.

      1. problematische Seite

        Hej Timak97,

        @marctrix Hatte es schon mit nur % angepasst, sodass es auf dem PC passt. Auf dem Smartphone ändert sich das Bild überhaupt nicht, dass ist was mich so wundert.

        Dann ändert der Container der Bilder seine Breite nicht.

        Marc

  3. problematische Seite

    Hallo Timak97,

    ich habe das Problem, dass ich es einfach nicht hinbekommen, dass die Bilder auf der o.g. Seite sich auf einem Smartphone an die Größe anpassen.

    Im nicht gezeigten Quelltext:

    <link rel="icon" href="img/Tabicon.png"> <!Legt das Icon im Tab fest, Bild noch abändern>
    

    Der Kommentar ist kein Kommentar, möglicherweise bringt das den einen oder anderen Browser durcheinander.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. problematische Seite

      @Matthias Apsel Ah danke, das hatte ich übersehen.

      Habe jetzt width und height prozentual eingestellt, leider auf dem Smartphone keine veränderung der Bildergröße.. Man muss immernoch zoomen bzw. nach rechts scrollen.

      1. problematische Seite

        hallo

        @Matthias Apsel Ah danke, das hatte ich übersehen.

        Habe jetzt width und height prozentual eingestellt, leider auf dem Smartphone keine veränderung der Bildergröße.. Man muss immernoch zoomen bzw. nach rechts scrollen.

        Ich kann auch kein @media Bereich entdecken, der mobile abdeckt.

        1. problematische Seite

          einen @media Bereich habe ich, oder fehlt dort noch etwas?

          Bin absoluter Anfänger...

          1. problematische Seite

            hallo

            einen @media Bereich habe ich, oder fehlt dort noch etwas?

            Bin absoluter Anfänger...

            sogar zwei.

            • @media (min-width: 30em) { }
            • @media (min-width: 50em) { }

            Aber die dortigen Breitendefinitionen treffen nicht auf übliche mobile zu.

            1. problematische Seite

              Was ist denn eine typische Größe für Mobile?

              1. problematische Seite

                hallo

                Was ist denn eine typische Größe für Mobile?

                du kannst die Bilschirm-Simulation deines Browsers konsultieren.

              2. problematische Seite

                @@Timak97

                Was ist denn eine typische Größe für Mobile?

                Weder eine noch typische.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. problematische Seite

                  Gunnar will Dir sagen, dass es KEINE typische Größe für "Mobile" gibt.

                  Und noch etwas: Wieso "mobile"? Es gibt inzwischen Freaks, die kleben sich Raspis mit Touchscreen in die Küche um Rezepte aus dem Internet nachkochen zu können. Die sind dann nicht "mobil" - haben aber kleine Bildschirmchen.

                  Und Pixel sagen bekanntlich auch nichts aus. Weil die Größe, in der Zeichen dargestellt werden, einmal vom Betriebssystem und dann vom Benutzer vorgegeben wird.

                2. problematische Seite

                  Hej Gunnar,

                  @@Timak97

                  Was ist denn eine typische Größe für Mobile?

                  Weder eine noch typische.

                  Was @Gunnar Bittersmann (im Gegensatz zu @beatovich meint):

                  Richte dich bei der Wahl von Größen und Breakpoints nicht nach einem Gerät (dann vernachlässigst du die meisten alle anderen(!) Geräte) sondern am Inhalt. Dadurch sorgst du für eine vernünftige Darstellung auf allen Geräten.

                  Dennoch will auch Gunnar nicht 100 verschiedene Breakpoints. Das würde auch andere Team-Mitglieder in den Wahnsinn treiben. Insbesondere die Kollegen von der QS, die deinen Kram testen und verstehen müssen (im Zweifel bist du der Kollege von der QS, wenn du dich nach einem Jahr fragst, warum etwas bei einer bestimmten viewport-Größe seltsam aussieht und der sich dann über den Sch**ß Entwickler ärgert). 😉

                  Also sei nett zu dir selbst und versuche Breakpoints zu finden, die du wiederverwenden kannst!

                  An diesen Punkten sollte sich dann vielleicht auch an deinem Raster etwas ändern, wenn du das ohne Media-Queries umgesetzt hast.

                  Schon weil es dich zum nachdenken über ein Konzept zwingt. Konzepte sind gut!

                  Marc

                  1. problematische Seite

                    hallo

                    Hej Gunnar,

                    @@Timak97

                    Was ist denn eine typische Größe für Mobile?

                    Weder eine noch typische.

                    Was @Gunnar Bittersmann (im Gegensatz zu @beatovich meint):

                    Richte dich bei der Wahl von Größen und Breakpoints nicht nach einem Gerät (dann vernachlässigst du die meisten alle anderen(!) Geräte) sondern am Inhalt. Dadurch sorgst du für eine vernünftige Darstellung auf allen Geräten.

                    Nein!

                    1. problematische Seite

                      @@beatovich

                      Was @Gunnar Bittersmann (im Gegensatz zu @beatovich meint):

                      Richte dich bei der Wahl von Größen und Breakpoints nicht nach einem Gerät (dann vernachlässigst du die meisten alle anderen(!) Geräte) sondern am Inhalt. Dadurch sorgst du für eine vernünftige Darstellung auf allen Geräten.

                      Nein!

                      Nein was?
                      [  ] dass wir unterschiedliche Dinge meinen
                      [  ] dass man Breakpoints nicht nicht an Geräten, sondern an Inhalten fetsmachen soll
                      [  ] dass man dadurch für eine vernünftige Darstellung auf allen Geräten sorgt

                      Zutreffendes bitte ankreuzen!

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. problematische Seite

                        hallo

                        Richte dich bei der Wahl von Größen und Breakpoints nicht nach einem Gerät (dann vernachlässigst du die meisten alle anderen(!) Geräte) sondern am Inhalt. Dadurch sorgst du für eine vernünftige Darstellung auf allen Geräten.

                        Nein!

                        Nein was?
                        [  ] dass wir unterschiedliche Dinge meinen
                        [  ] dass man Breakpoints nicht nicht an Geräten, sondern an Inhalten fetsmachen soll
                        [  ] dass man dadurch für eine vernünftige Darstellung auf allen Geräten sorgt

                        Nein! marctrix will nicht verstehen was die Aufforderung, die Bildschirmsimulation zu konsultieren, zur Folge haben kann.

                        Er missbraucht meine Aussage!

                        1. problematische Seite

                          marctrix will nicht verstehen was die Aufforderung, die Bildschirmsimulation zu konsultieren, zur Folge haben kann.

                          Verstehe ich das so, dass auch Du sagen würdest: "Mach einfach manuell das Browserfester schrittweise schmaler und kürzer und sieh Dir an, was passiert?"

                          1. problematische Seite

                            hallo

                            marctrix will nicht verstehen was die Aufforderung, die Bildschirmsimulation zu konsultieren, zur Folge haben kann.

                            Verstehe ich das so, dass auch Du sagen würdest: "Mach einfach manuell das Browserfester schrittweise schmaler und kürzer und sieh Dir an, was passiert?"

                            Die Bildschirmsimulation gibt viele Beispiele von typen-bezogenen Grössen. Die Erfahrung widerspricht also der Vorstellung, es gäbe eine Normgrösse. In keiner Weise kann man dort die typische mobile Grösse herauslesen.

                        2. problematische Seite

                          Hej beatovich,

                          Nein! marctrix will nicht verstehen was die Aufforderung, die Bildschirmsimulation zu konsultieren, zur Folge haben kann.

                          Stimmt nicht. Ich möchte gerne verstehen. Brauche aber vielleicht noch etwas Hilfe.

                          So weit ich weiß, stellt die Bildschirmsimulation drei oder vier Auflösungen bereit. Ich nutze die nie, deswegen rate ich hier etwas rum.

                          Meine Schlussfolgerung war nun, dass dies deiner Meinung nach die Auflösungen sind, auf die es ankommt. Liege ich damit falsch?

                          Er missbraucht meine Aussage!

                          Ach was - sie will es doch auch!

                          Marc

                          1. problematische Seite

                            hallo

                            So weit ich weiß, stellt die Bildschirmsimulation drei oder vier Auflösungen bereit. Ich nutze die nie, deswegen rate ich hier etwas rum.

                            Dann schau dir die mal im Firefox an. Da bekommst du ganz andere Ideen.

                            1. problematische Seite

                              Hej beatovich,

                              So weit ich weiß, stellt die Bildschirmsimulation drei oder vier Auflösungen bereit. Ich nutze die nie, deswegen rate ich hier etwas rum.

                              Dann schau dir die mal im Firefox an. Da bekommst du ganz andere Ideen.

                              Danke, das war hilfreich wie immer!

                              Könntest du mir bitte noch sagen, wo ich dafür drücken muss auf meinem Screen?

                              Wo sind die FF-Entwicklungswerkzeuge unter iOS?

                              Für dich scheint es nichts zu geben hinter deinem Tellerrand!

                              Marc

  4. problematische Seite

    Kurpfalz kenne ich vom Lied mit dem Jäger. Aber Türpfalz?

    Und dein "nach oben" Link ist sehr auseinandergerissen.