Scaling images voor mobiele platform met CSS

[witkop525]

Hallo,

Kan iemand mij helpen met het volgende?
Ik ben aan het werk met een CSS bestand, daarmee moet ik een website stylen voor de mobiele platform.
Ik moet er voor zorgen dat afbeeldingen, automatisch schalen op de grootte van de scherm van een mobiele gebruiker.

voorbeeld:


img
{
max-width: 100%;
}


Hiermee zit de width dan wel goed, alleen de hoogte wordt er nog niet door aangepast. Ik zou heigh: auto; kunnen gebruiken, maar op een of andere manier werkt dat niet. Dus vroeg ik mij af of iemand hier een oplossing voor weet?

Bij voorbaat dank, Barry

[Bosmonster]

max-width is met een streepje. height: auto zou prima moeten werken.

[witkop525]

Bosmonster schreef op vrijdag 21 februari 2014 @ 09:45:
max-width is met een streepje. height: auto zou prima moeten werken.

Ja bedoelde ik. Tijdens het typen vergeten dat streepje te zetten. Komt er op neer dat height: auto; dus niet werkt.

[witkop525]

Laat maar ik heb het al gevonden. Ik moest er voor zorgen dat mijn height: auto; override.

Dus:

img
{
width-max: 100%;
height: auto !important;
}

Toch bedankt.

[Bosmonster]

Een !important op tag-niveau is natuurlijk niet zo'n goed idee, maar goed

[witkop525]

Hoezo dat?

[MoietyMe]

Je kan beter iets gebruiken in de trant van:

Cascading Stylesheet:

.img-responsive {
  max-width: 100%;
  height: auto !important;
}

Zo voorkom je problemen met bijvoorbeeld een interactieve kaart (lees: Google Maps, etc).

[witkop525]

Het betreft een CSS. Bekijk mijn beschrijving in mijn eerste topic.

[Bosmonster]

Wat ik bedoel is dat je nu standaard voor alle images, middels een !important statement, het gedrag vastlegt.

Stel nu dat je later een keer een image wel een vaste hoogte wil geven met CSS, dan moet je daar dus vanaf nu altijd !important voor gebruiken.

Dit is bad practice en dat verwachten andere developers niet, dus kan het in de toekomst ook problemen opleveren met bijvoorbeeld externe code zoals Good Fella al aangeeft.

[ Voor 24% gewijzigd door Bosmonster op 21-02-2014 11:19 ]

[witkop525]

Ja maar het is de bedoeling dat alle images gescaled worden. Zal de img tag dan problemen opleveren voor extensies? Dat weet ik zelf niet. Het ging er wel om dat alle afbeeldingen dus gescaled werden. Als er later nog iets aan toegevoegd moet worden waardoor !important irrelevant zal worden, zal er daar dan wel weer een oplossing voor moeten worden gezocht, want dat is momenteel geen wens van de gebruiker en zal ik hier dus verder ook niks mee te maken hebben...

[FotW]

Ik vind het eigenlijk vreemd dat je uberhaupt een height: auto nodig hebt, tenzij je parent geen flexibele breedte heeft.

[Bosmonster]

De height:auto is in mijn ervaring vaak nodig als oudere sites responsive gemaakt worden, of CMS'en niet goed overweg kunnen met responsive. Dan heb je vaak dat er width/height attributen op images worden gekwakt die je vervolgens dus weer moet overrulen.

Heb niks tegen width/height attributen overigens op images en ze toevoegen is voor niet-responsive nog steeds best practice. Maar dat komt tegenwoordig natuurlijk steeds minder voor.

[ Voor 26% gewijzigd door Bosmonster op 21-02-2014 11:53 ]

[witkop525]

Ja dat klopt. Ik werk met een vrij nieuwe CMS, dus dat het geen responsive ondersteund, klopt inderdaad.
En ik kan niet bij de HTML bestand zelf om CSS properties te veranderen.

[_Thanatos_]

Bosmonster schreef op vrijdag 21 februari 2014 @ 11:52:
De height:auto is in mijn ervaring vaak nodig als oudere sites responsive gemaakt worden, of CMS'en niet goed overweg kunnen met responsive. Dan heb je vaak dat er width/height attributen op images worden gekwakt die je vervolgens dus weer moet overrulen.

Gekwakt? Dat is juist goed. Een afbeelding moet ruimte innemen al vóórdat ie geladen wordt, om te voorkomen dat content na dergelijke plaatjes verspringt iedere keer als een van de plaatjes laadt.

Daarom zet ik *altijd* een width/height attribuut op een plaatje, en vervolgens (als het gaat om content plaatjes) een max-height:100% en height:auto. Niet alleen werkt het perfect, het maakt ook nog perfecte sense. De hoogte moet immers automatisch, dus het is volkomen logisch om dat ook op te schrijven.

[Bosmonster]

_Thanatos_ schreef op zaterdag 22 februari 2014 @ 02:18:
[...]

Gekwakt? Dat is juist goed. Een afbeelding moet ruimte innemen al vóórdat ie geladen wordt, om te voorkomen dat content na dergelijke plaatjes verspringt iedere keer als een van de plaatjes laadt.

Daarom zet ik *altijd* een width/height attribuut op een plaatje, en vervolgens (als het gaat om content plaatjes) een max-height:100% en height:auto. Niet alleen werkt het perfect, het maakt ook nog perfecte sense. De hoogte moet immers automatisch, dus het is volkomen logisch om dat ook op te schrijven.

Lees het laatste stukje van mn post anders ook even

Met "kwakken" bedoel ik dat dit bij een CMS instelbaar zou moeten zijn. Bij een responsive site hoeven ze er niet op, want overschrijf je het toch.

[T-MOB]

Nu heb ik niet getest of ze het ook doen. Maar een browser kan met een image met width en height attributen en een CSS die de boel override al vrij behoorlijk bepalen wat de maat van de afbeeldingen gaat worden voordat de image geladen is. (Aangenomen dat de width en height de correcte verhouding weergeven). Ook in een responsive site heb je dan het voordeel dat de boel niet verspringt als afbeeldingen laden. Maar zelfs als ze het niet doorrekenen bij een override is er op zijn minst 1 weergave die het voordeel van niet-verspringen heeft.
Ik zie echt niet in hoe weglaten beter kan zijn bij responsive sites. Buiten een paar bytes aan HTML-code heeft het geen enkel voordeel.

[R4gnax]

T-MOB schreef op maandag 24 februari 2014 @ 12:00:
Nu heb ik niet getest of ze het ook doen. Maar een browser kan met een image met width en height attributen en een CSS die de boel override al vrij behoorlijk bepalen wat de maat van de afbeeldingen gaat worden voordat de image geladen is. (Aangenomen dat de width en height de correcte verhouding weergeven). Ook in een responsive site heb je dan het voordeel dat de boel niet verspringt als afbeeldingen laden. Maar zelfs als ze het niet doorrekenen bij een override is er op zijn minst 1 weergave die het voordeel van niet-verspringen heeft.
Ik zie echt niet in hoe weglaten beter kan zijn bij responsive sites. Buiten een paar bytes aan HTML-code heeft het geen enkel voordeel.

Als extra bytes aan niet gebruikte en slecht met GZIP comprimerende numerieke attributen niet voldoende reden is:
Wat dacht je van het vrij normale scenario waar CMS afbeeldingen een cache-tijd hebben die afwijkt van de cache-tijd van de HTML pagina zelf? Daar loop je het risico in een situatie te komen waar verkeerde maten op de img tag gezet gaan worden.


Als je het te wensen aspect ratio van je afbeelding weet, dan kun je een paar leuke trucjes uithalen waardoor je hoogte noch breedte hoeft vast te zetten en browsers toch extra layout passes kunnen vermijden:

HTML:

<figure class="fig-responsive" data-aspect="4:3">
  <img src="image.jpg" />
</figure>

<figure class="fig-responsive" data-aspect="16:9">
  <img src="image2.jpg" />
</figure>

Cascading Stylesheet:

.fig-responsive {
  display  : block;
  overflow : hidden;
  position : relative;
}

.fig-responsive:before {
  display    : block;
  height     : 0;
  visibility : hidden;
  width      : 100%;
}

.fig-responsive[data-aspect="4:3"]:before {
  /* 1. Necessary for IE8 to have unique content for each aspect ratio.
   *    IE8 does not correctly repaint pseudo-elements to reflect updated
   *    CSS rules, unless their content property is also changed.
   * 2. Percentual paddings are based on the parent element's width, also
   *    for vertical padding. This can be used to define an aspect ratio.
   */
  content     : "4:3"; /* 1 */
  padding-top : 75%;   /* 2 */
}

.fig-responsive[data-aspect="1:1"]:before  { content :  "1:1"; padding-top:   100% }
.fig-responsive[data-aspect="3:2"]:before  { content :  "3:2"; padding-top: 66.66% }
.fig-responsive[data-aspect="16:9"]:before { content : "16:9"; padding-top: 56.25% }
/* ( ... etc ... ) */

.fig-responsive > img {
  /* 1. Automatic margins perform both horizontal and vertical centering
   *    on absolutely positioned elements when they are overconstrained.
   * 2. Ensure the image will not grow wider or taller than its allotted
   *    space within the figure, automatically performing either
   *    horizontal or vertical letter-boxing.
   */
  margin     : auto; /* 1 */
  max-height : 100%; /* 2 */
  max-width  : 100%; /* 2 */
  position   : absolute;
    top        : 0;
    right      : 0;
    bottom     : 0;
    left       : 0;
}