• Forum
• Allgemein
• HTML, PHP, SQL,...
• firefox width Probleme

ilch Forum » Allgemein » HTML, PHP, SQL,... » firefox width Probleme

1. Mo. 04.05.2015 08:32 Uhr #1

   

   Saarlonz Hall Of Fame

   Registriert seit

   07.08.2008

   Beiträge

   3.003

   Beitragswertungen

   

   Hallo zusammen,
   
   Ich habe aktuelle folgendes Problem sich die Bilder einem resposiven Design anpassen sollen.
   
   Ich habe mir anfangs gedacht das ganze einfach mittels max-width zu lösen, wo ich jedoch nach kurzer Zeit merken musste das der Firefox Browser nicht bzw nicht mehr mit max-width arbeitet.
   
   Nach reichlicher Recherche mit google und beistand von Maretz kam dann folgender Ansatz dabei raus:
   
   CSS:
   

   .bbcodebildbreite img {
   width: 100%;
   max-width: 100%;
   height:auto;
   }

   
   
   HTML:
   

   <div class="bbcodebildbreite"><img src="http://fs1.directupload.net/images/150502/ri88zgov.jpg" alt="" /></div>

   
   
   Hierbei werden Bilder die Größer als das div sind auch genau so wie es soll der Größe des div´s angepasst. Jedoch werden auch Bilder die kleiner als das div sind immer auf 100% des div´s vergrößert.
   
   Meine Frage nun, wie kann ich es lösen das Bilder die größer als das div sind sich anpassen, jedoch Bilder die kleiner sind dies nicht tun.
   
   Bin für jede Hilfe dankbar.
   
   
   verwendete ilch Version: 1.1 P
   0 Mitglieder finden den Beitrag gut.

   • zitieren
2. Mo. 04.05.2015 08:49 Uhr #2

   

   corian Entwickler

   Registriert seit

   16.06.2011

   Beiträge

   1.096

   Beitragswertungen

   

   Guten Morgen, nehm einfach das width: 100% raus.
   0 Mitglieder finden den Beitrag gut.

   • zitieren
3. Mo. 04.05.2015 09:00 Uhr #3

   

   Saarlonz Hall Of Fame

   Registriert seit

   07.08.2008

   Beiträge

   3.003

   Beitragswertungen

   

   Naja, wie erwähnt, Firefox unterstützt max-width nicht. Wenn ich es so mache wird das Bild in voller Auflösung angezeigt.
   0 Mitglieder finden den Beitrag gut.

   • zitieren
4. Mo. 04.05.2015 09:07 Uhr #4

   

   corian Entwickler

   Registriert seit

   16.06.2011

   Beiträge

   1.096

   Beitragswertungen

   

   Poste mal das div etc darum und die css angaben, dann kann man das eventuell besser nachvollziehen. Mit width: 100% willst du ja auch das es in voller Auflösung angezeigt wird.
   0 Mitglieder finden den Beitrag gut.

   • zitieren
5. Mo. 04.05.2015 09:20 Uhr #5

   

   Saarlonz Hall Of Fame

   Registriert seit

   07.08.2008

   Beiträge

   3.003

   Beitragswertungen

   

   Hier der link zur Seite: battlefield-funclan.de/index.php?forum-showposts-7-p1
   0 Mitglieder finden den Beitrag gut.

   • zitieren
6. Mo. 04.05.2015 11:56 Uhr #6

   

   Saarlonz Hall Of Fame

   Registriert seit

   07.08.2008

   Beiträge

   3.003

   Beitragswertungen

   

   Ok, hat sich erledigt, hab es hinbekommen. Ich weiß nicht ob es die sauberste art ist, aber es funktioniert vorerst mal:
   
   

   .bbcodebildbreite img {
       max-width: 100%;
       height:auto;
   }
   
   /* Nur Firefox */ 
   
   @-moz-document url-prefix() { 
       .bbcodebildbreite img { 
           max-width: -moz-fit-content; 
           width: 100%;
           height: auto; 
       } 
   }

   0 Mitglieder finden den Beitrag gut.

   • zitieren
7. Mo. 04.05.2015 12:08 Uhr #7

   

   Ahrtas Moderator

   Registriert seit

   17.12.2007

   Beiträge

   2.368

   Beitragswertungen

   

   .bbcodebildbreite img {
   width: 100%;
   }

   
   so passt es auch
   
   Ich habe es hier mit zwei CSS-Dateien gelöst, einmal für Desktop und einmal für Mobile.
   
   Wobei ich bei den Desktop-CSS die tatsächliche Breite von 175px angegeben habe und bei den Mobile-CSS 50% von der aktuellen Breite egal welche Auflösung.
   
   Wenn du sagst alle Bilder mit der Klasse "bbcodebildbreite" müssen sich auf 100% anpassen, dann tun es ja alle innerhalb der Klasse.
   Also musst du den einzelnen Bilder eine separate Klasse geben oder Bildergruppen erstellen wie z.B.:

   .bbcodebildbreite img { /* grundsätzlich alle Bilder innerhalb der Klasse */
   width: 100%;
   }
   .bbcodebildbreite img.snipersPic { /* nur Bilder mit der Klasse sniperPic */
   width: 75%;
   }
   .bbcodebildbreite .userpost img { /* nur Bilder innerhalb der Klasse "userpost" */
   width: 50%;
   }

   
   Bilder die sich überhaupt nicht ändern sollen, musst du mindestens Breite oder Höhe im Quelltext angeben.

   <div class="bbcodebildbreite"><img src="http://fs1.directupload.net/images/150502/ri88zgov.jpg" alt="" width="250" /></div>

   Der Browser passt dann den Rest an, also gibst du Höhe an, kalkuliert der Browser die Breite automatisch.
   
   
   Also entweder eine CSS für alle Auflösungen mit Kompromisse oder in absteigende Stufungen eine CSS pro jeweilige Auflösung.
   Die letzte Variante lässt dir eben Freiheit in der Längen/Höhen Angabe.
   0 Mitglieder finden den Beitrag gut.

   • zitieren
8. Mo. 04.05.2015 21:04 Uhr #8

   

   Wizzard26 Mitglied

   Registriert seit

   05.03.2009

   Beiträge

   259

   Beitragswertungen

   

   ein wenig umständlich.
   Auch der FF kann eine width von 100%, height auto kannst du dir da sparen da diese standardmässig auto ist.
   
   Mit max-width begrenzt du nur.
   Sprich du würdest img {width: 100%; max-width:450px} schreiben.
   
   So würde es immer den vollen container füllen bis zu einer width von 450px, danach stopt das img.
   
   Man brauch auch keine 3 css dateien dafür, nen media query ist nun wirklich schnell geschrieben zumal man eigentlich eh mit Mobile anfangen sollte.
   
   img {width:50%}
   @media screen and (min-width:485px) { img{width:75%;} }
   @media screen and (min-width:768px) { img{width:100%} }
   
   spart dateien, änderungen sind schneller durchgeführt da man nicht switchen muß und weniger fehlerquellen
   0 Mitglieder finden den Beitrag gut.

   • zitieren