• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ändern der Bildgröße mit Mediaqueries funktioniert nicht

S

Sempervivum

Guest
Ich habe Bilder (Thumbnails) deren Größe ich mit Mediaqueries ändern möchte:
HTML: 
<img class="th200" src="heimat/Harz_Arboretum/2014-10-14_Harz_Arboretum_18_lk200.jpg" style="border: 0px solid;">
CSS:
HTML: 
@media only screen and (max-width: 768px) {
.th200 {
height: 50%;
width: 50%;
}
}
So funktioniert es. Ursprünglich hatte ich jedoch die Größe der Bilder festgelegt:
HTML: 
<img class="th200" src="heimat/Harz_Arboretum/2014-10-14_Harz_Arboretum_18_lk200.jpg" style="border: 0px solid; width: 200px; height: 150px">
Damit funktionierte es nicht. Warum ist das so? Ich hätte erwartet, dass die Definition der Maße, z. B. 200px, durch die Prozentangabe überschrieben wird.
 
Werbung:
CSS-Specifities (Gewichtung) aufsteigend:

HTML-Elemente: 1
Klassen, Pseudoklassen: 10
ID: 100
Inline: 1000
!important: kann nur durch !important überschrieben werden.

Theoretisch ließe sich mit !important innerhalb den Media-Queries der Inline-Style überschreiben. Sollte man aber nicht tun.
 
Zuletzt bearbeitet:
Werbung:
Ah ja, das leuchtet ein. Danke für die Antworten. Im CSS-File konnte ich die Maße nicht ohne weiteres angeben, weil es unter der selben Klasse verschiedene Seitenverhältnisse gibt. Ohne funktioniert es aber genausogut.
 
Was übrigens auch der Grund ist, warum man innerhalb Stylesheets möglichst keine IDs verwenden sollte. Es würde 11 verkettete CSS-Klassen brauchen, um eine ID zu überschreiben und 101 für einen Inline-Style.
 
Muss diesen Thread doch noch mal aufgreifen. Ich dachte, ich hätte die Lösung gefunden, um mein JS durch CSS abzulösen, aber es funktioniert doch noch nicht. Mein Ziel ist, die Größe der Thumbnails zu halbieren, wenn die Fensterbreite die Grenze unterschreitet. Leider funktioniert dies mit der Angabe von 50% beim img-Tag nicht, weil sich diese auf die Größe des Elternelementes bezieht. Gibt es eine Möglichkeit, die Größe eines Bildes durch CSS zu halbieren?
http://ulrichbangert.de/heimat/Bad_...n/2015-04-05_Bad_Harzburg_Oldtimertreffen.php
 
Werbung:
Habe jetzt bei stackoverflow gefunden, dass ich die Bilder mit scale herunter skalieren kann. Funktioniert soweit aber dann habe ich das Problem, dass sich die Größe des umgebenden a-Tags nicht ändert. Konnte ich auch nicht lösen, indem ich diesem ebenfalls die Klasse th200 gegeben habe. Wie kann ich dieses lösen?
CSS:
HTML: 
@media only screen and (max-width: 768px) {
.th200 {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
}
HTML: 
<a href="2015-04-05_Bad_Harzburg_Oldtimertreffen_01.jpg" class="ilightbox th200"><img class="th200" src="2015-04-05_Bad_Harzburg_Oldtimertreffen_01_th200.jpg" alt="Oldtimertreffen in Bad Harzburg" style="border: 2px solid black" /></a>
(Wie kann ich erreichen, dass meine Einrückungen erhalten bleiben?)
 
Zuletzt bearbeitet von einem Moderator:
Banana_Jones schrieb:
Ich würde mal vermuten, das <a> muss ein block sein, damit Transformationen greifen
Zum Vergrößern anklicken....

Ich denke eher man müsste die Transformation auf das <a> anwenden, statt dem <img>.

Sempervivum schrieb:
Habe jetzt bei stackoverflow gefunden, dass ich die Bilder mit scale herunter skalieren kann. Funktioniert soweit aber dann habe ich das Problem, dass sich die Größe des umgebenden a-Tags nicht ändert. Konnte ich auch nicht lösen, indem ich diesem ebenfalls die Klasse th200 gegeben habe. Wie kann ich dieses lösen?
CSS:
HTML: 
@media only screen and (max-width: 768px) {
.th200 {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
}
HTML: 
<a href="2015-04-05_Bad_Harzburg_Oldtimertreffen_01.jpg" class="ilightbox th200"><img class="th200" src="2015-04-05_Bad_Harzburg_Oldtimertreffen_01_th200.jpg" alt="Oldtimertreffen in Bad Harzburg" style="border: 2px solid black" /></a>
(Wie kann ich erreichen, dass meine Einrückungen erhalten bleiben?)
Zum Vergrößern anklicken....

Ich würde es sonst mal damit versuchen:
http://caniuse.com/#search=viewport

Habe ich zwar noch nie verwendet, wegen dem schwachen Support, aber eine andere Möglichkeit bleibt wohl kaum.
 
Werbung:
Eigentlich macht man das aber anders. Bei responsiven src images legt man diese in ein Blockelement, welches skaliert wird. Das Bild selber erhält width: 100%, height: auto und gegebenenfalls noch eine max-width in Pixeln.
 
Werbung:
Tronjer schrieb:
Eigentlich macht man das aber anders. Bei responsiven src images legt man diese in ein Blockelement, welches skaliert wird. Das Bild selber erhält width: 100%, height: auto und gegebenenfalls noch eine max-width in Pixeln.
Zum Vergrößern anklicken....

Soweit ich das verstanden habe, will Sempervivum nicht 100% vom Parent, sondern 100% vom Viewport. (Bzw. 50% oder wie auch immer…). Nach erneutem durchlesen habe ich selbst den Durchblick verloren.
 
Habe jetzt dem umgebenden a-Element display:inline-block gegeben. Laut HTML-Ansicht von Firebug hat es damit auch die halbe Größe aber zwischen den Elementen ist jede Menge leerer Raum, so dass der erwünschte Effekt trotzdem nicht eintritt. Verstehe ich nicht! Woher kommt dieser Leerraum?
Um es noch Mal klarzustellen: Ich will lediglich die Größe der Bilder auf die Hälfte reduzieren, so dass mehr auf einen kleinen Bildschirm passen. Eine %-Angabe führt dabei nicht zum Ziel, da diese sich auf das umgebende Element bezieht.
 
Sempervivum schrieb:
Habe jetzt dem umgebenden a-Element display:inline-block gegeben. Laut HTML-Ansicht von Firebug hat es damit auch die halbe Größe aber zwischen den Elementen ist jede Menge leerer Raum, so dass der erwünschte Effekt trotzdem nicht eintritt. Verstehe ich nicht! Woher kommt dieser Leerraum?
Um es noch Mal klarzustellen: Ich will lediglich die Größe der Bilder auf die Hälfte reduzieren, so dass mehr auf einen kleinen Bildschirm passen. Eine %-Angabe führt dabei nicht zum Ziel, da diese sich auf das umgebende Element bezieht.
Zum Vergrößern anklicken....

Deshalb vw statt Prozent?
Allerdings sind das dann 50% vom Viewport, nicht 50% vom Bild selbst.
Ohne Javascript wird das aber auch nicht funktionieren, wenn transform schon nicht zum gewünschten Ergebnis führt. Den freien Platz bekommst du nämlich nicht weg.
 
Werbung:
??? Wieso vw? Das Skalieren funktioniert ja, es ist nur wirkungslos durch den großen Leerraum zwischen den Bildern.
 
Sempervivum schrieb:
??? Wieso vw? Das Skalieren funktioniert ja, es ist nur wirkungslos durch den großen Leerraum zwischen den Bildern.
Zum Vergrößern anklicken....

Du schreibst % funktioniert nicht wegen dem Parent…
90vw sind 90% - ohne Berücksichtigung des Parents.

Das Skalieren mit transform funktioniert? Klar.
Den Whitespace bekommst du trotzdem nicht ohne weiteres weg.
Deshalb funktioniert transform eben auch nicht.
 
Werbung:
Sempervivum schrieb:
Um es noch Mal klarzustellen: Ich will lediglich die Größe der Bilder auf die Hälfte reduzieren, so dass mehr auf einen kleinen Bildschirm passen. Eine %-Angabe führt dabei nicht zum Ziel, da diese sich auf das umgebende Element bezieht.
Zum Vergrößern anklicken....

Vielleicht verstehe ich ja nicht was du meinst, aber das Problem lösen doch die Grid-Layouts von Bootstrap & Co. Was spricht denn dagegen, die Bilder in ein Blockelement zu legen und dieses zu skalieren?
 
Ja, habe mal einen Blick auf die Website von Bootstrap geworfen, aber zum großen Teil nur Bahnhof verstanden. Ist mir irgendwie zu kompliziert. Das Layout, das ich habe, ist genau das, was ich ich mir vorstelle und mit dem JS, was ich habe, funktioniert auch die Größenänderung einwandfrei. Kaum zu glauben, dass sich so eine einfache Aufgabe mit CSS nicht lösen lässt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben