[css] Rand om img als max-width met css mogelijk?

[jfeelders]

Net als op dit forum zou ik op 'mijn' forum graag een rand om een afbeelding willen hebben indien een afbeelding is aangepast door de max-width-declaratie. Afbeeldingen die de max-width grens niet overschrijden moeten onaangepast blijven.
Nu is if...then geen CSS maar er is wel veel mee mogelijk en ik leer nog elke dag. Met GoT, Google en w3schools kon ik het antwoord niet vinden, dus dan maar vragen.
Is het met CSS mogelijk opmaak enkel toe te passen indien een element heeft voldaan aan een andere opmaak-declaratie? Misschien CSS3? Iets als hieronder misschien?

Cascading Stylesheet:

.fh3 img(max-width:530px)
{
    border: 1px red dotted;
}

[Spinal]

Geen idee of het met puur CSS kan, maar post eens een groot plaatje en kijk hoe het hier op GoT gedaan wordt

[jfeelders]

Hier wordt een javascript ingezet om server-side de afbeelding verkleind weer te geven (zie crisp in "\[css/dhtml] probleem met image"). Deze kleinere image zal dan waarschijnlijk met een nieuwe eigen class worden opgemaakt.
Omdat mijn aanpak en wensen anders zijn wil ik het, zo mogelijk, graag alleen via CSS proberen.

[TERW_DAN]

Je zult toch iets van een scriptje hebben om te checken wat de breedte is van het plaatje neem ik aan. Als je in dat scriptje gelijk de classname instelt van het ding dan kun je in CCS aan die klass gewoon een border hangen.

[Xander]

TERW_DAN schreef op zaterdag 15 augustus 2009 @ 12:15:
Je zult toch iets van een scriptje hebben om te checken wat de breedte is van het plaatje neem ik aan.

Waarom? Een maximale breedte aan een plaatje geven kan toch ook met enkel CSS?

[jfeelders]

Ja, de maximale breedte instellen wel. In de CSS stel je dan een 'voorwaarde' voor alle images die binnen een bepaalde class horen. Ik wil niet ook alle images binnen die class een rand geven; enkel die zijn aangepast door de max-width. Indien CSS een oplossing biedt waarbij je een border kan toewijzen aan images die binnen een bepaalde class vallen en zijn aangepast door de max-width dan zou dat het snelst werken. Volgens de serverside-scripters misschien niet de mooiste manier, maar dat is hier even niet ter sprake...

[TERW_DAN]

Xander schreef op zaterdag 15 augustus 2009 @ 12:19:
[...]


Waarom? Een maximale breedte aan een plaatje geven kan toch ook met enkel CSS?

Nou, van wat ik begreep is dat er een scriptje is die dat spul test (zie de post boven mij). Dus in dat geval kun je vrij makkelijk een extra classname eraan hangen.

[Xander]

TERW_DAN schreef op zaterdag 15 augustus 2009 @ 12:52:
[...]

Nou, van wat ik begreep is dat er een scriptje is die dat spul test (zie de post boven mij). Dus in dat geval kun je vrij makkelijk een extra classname eraan hangen.

Nee...

jfeelders schreef op zaterdag 15 augustus 2009 @ 12:15:
Hier wordt een javascript ingezet om server-side de afbeelding verkleind weer te geven (zie crisp in "\[css/dhtml] probleem met image"). Deze kleinere image zal dan waarschijnlijk met een nieuwe eigen class worden opgemaakt.

Hier wordt er een scriptje voor gebruikt. "Hier" alsin:

ZanderZ schreef op zaterdag 15 augustus 2009 @ 12:09:
Geen idee of het met puur CSS kan, maar post eens een groot plaatje en kijk hoe het hier op GoT gedaan wordt

Zelf gebruikt TS een max-width declaratie in zijn CSS. Het randje zou hij ook het liefst zonder JS op willen lossen:

jfeelders schreef op zaterdag 15 augustus 2009 @ 12:15:
Omdat mijn aanpak en wensen anders zijn wil ik het, zo mogelijk, graag alleen via CSS proberen.

Ik ben te goed uitgerust geloof ik.

Overigens zie ik niet hoe je dit met puur CSS op zou moeten lossen, ben bang dat het toch een stukje JS zal worden.

[_Thanatos_]

Stukje jquery als voorbeeld:

JavaScript:

$("img")
  .filter(function() {
    return $(this).width() > 750;
  })
  .width(750)
  .addClass("shrunk");

En dan in je css iets met die class doen.

Het is helemaal niet zo erg dat je dit met javascript moet doen. Op het plaatje klikken wordt wrs ook een javascriptje, dus het ding verkleinen moet je dan ook met JS doen. Als JS dan uitstaat, werkt het allebei niet meer, en dat is minder erg dan dat ie wel verkleint, maar niet klikbaar is

Als je em zonder JS klikbaar maakt (maar dan opent ie dus uiteraard niet in een nieuw venster of popover) dan gaat mijn stelling natuurlijk niet meer op, en dan mag ie ook wel zonder JS verkleind worden.

Maar een conditie op afmetingen van een element in CSS is niet mogelijk, zelfs niet in CSS3.

[Tofu]

Een pure CSS oplossing zou kunnen zijn het overflow attribuut te gebruiken.
Je hebt dan wel geen randje natuurlijk, maar het "te veel" aan afbeelding wordt dan niet getoond.
Of serverside je plaatje controleren natuurlijk..

[jfeelders]

Ik had gisteravond ook al gekeken naar CSS3 :before/:after in combinatie met :counter-increment/:counter-reset. Erg nieuw nog allemaal, niet ondersteund door IE en werkte ook niet.
In ieder geval bedankt voor het meedenken iedereen. Ik laat het hier voorlopig bij...