Bilder auf Homepage an Smartphone anpassen
0 
Gunnar Bittersmann
0 
marctrix
0 0 marctrix
2 
Matthias Apsel
0 0 0
0 
encoder
Bilder auf Homepage an Smartphone anpassen
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;
}
}
-
@@Timak97
-
Code formatieren, bitte. Hab ich jetzt mal für dich gemacht.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
@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..
-
@@Timak97
Die Problematische Seite habe ich bereits verlinkt.
Sorry,
mein FehlerFehler 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
-
-
-
Hej Timak97,
Benutze Pixel oder Prozent 😉
Marc
-
@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.
-
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
-
-
-
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.-
@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.
-
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.
-
einen @media Bereich habe ich, oder fehlt dort noch etwas?
Bin absoluter Anfänger...
-
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.
-
Was ist denn eine typische Größe für Mobile?
-
hallo
Was ist denn eine typische Größe für Mobile?
du kannst die Bilschirm-Simulation deines Browsers konsultieren.
-
@@Timak97
Was ist denn eine typische Größe für Mobile?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
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.
-
Hej Gunnar,
@@Timak97
Was ist denn eine typische Größe für Mobile?
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 meistenalle 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
-
hallo
Hej Gunnar,
@@Timak97
Was ist denn eine typische Größe für Mobile?
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 meistenalle anderen(!) Geräte) sondern am Inhalt. Dadurch sorgst du für eine vernünftige Darstellung auf allen Geräten.Nein!
-
@@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 meistenalle 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-
hallo
Richte dich bei der Wahl von Größen und Breakpoints nicht nach einem Gerät (dann vernachlässigst du
die meistenalle 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!
-
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?"
-
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.
-
-
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
-
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.
-
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?
Für dich scheint es nichts zu geben hinter deinem Tellerrand!
Marc
-
-
-
-
-
-
-
-
-
-
-
Kurpfalz kenne ich vom Lied mit dem Jäger. Aber Türpfalz?
Und dein "nach oben" Link ist sehr auseinandergerissen.
