Grootte van een afbeelding

Status
Niet open voor verdere reacties.
Flamedog

Flamedog

Gebruiker
Lid geworden
14 jan 2007
Berichten
163
Ik heb een clanforum gemaakt, en als je dan bij een post een img upload, krijg je de volledige weergave. Als iemand dus een zeer groot plaatje upload (via imageshack bijv.), dan rekt dat plaatje de hele topic uit, dus praktisch kun je het plaatje zo groot maken als je wilt.

Is er een manier om er een thumbnail van te maken? Het forum werkt met Invision Power Board (dus met zo'n Admin CP en dan een hoop settings). Ik kan nergens iets vinden.

Thx in advance,
Flame
 
Ik resize mijn afbeeldingen altijd met IrfanView. Een gratis te downloaden programma.
 
Ja maar je moet bijv. door erop te klikken wel de originele grootte krijgen. Andere ideeën?
 
d.m.v php kun je een functie maken die automatisch foto's verkleint en dan zodra je er op klikt de grootte afbeelding opent met lightbox, met css kun je wel aangeven hoe groot een afbeelding moet zijn binnen de content door

# waar de afbeelding inzit img{
width: aantal px;
height: aantal px;
}
 
Laatst bewerkt:
Volgens mij heeft dat niet zoveel met css, maar alles met forumsoftware te maken.
Je kunt wel met css de maat van 'n afbeelding aangeven, maar dan is die afbeelding nog steeds heel groot, hij wordt alleen kleiner weergegeven. Dan kan het laden van 'n pagina bijvoorbeeld nog steeds (heel erg) lang duren. Sommige mensen zetten echt uit onkunde afbeeldingen van 'n aantal MB's online.
Bovendien kun je, als je hoogte en breedte opgeeft, 'n 'lachspiegel-effect' krijgen. De verhoudingen kunnen vervormd raken.
Wat jij bedoelt is waarschijnlijk dat er 'n thumbnail gemaakt wordt, automatisch, zodat het altijd gebeurt. Die thumbnail is dan ook klein in bestandsgrootte. En pas bij klikken daarop de grote afbeelding. Dan mag het laden ook even duren, want dan kiest iemand ervoor.
Ik gok dat je zoiets bedoelt.
Maar dan moet je het meer bij forumsoftware met zo'n functie zoeken. Alleen met css red je dat niet.
 
Laatst bewerkt:
Neen kan niet, zie:
Currently there is no way to prevent your members posting huge images using the attachment system. IPS seem reluctant to add this functionality despite people asking for it. I've been asking for it for years.
http://community.invisionpower.com/...ge resize upload__fromsearch__1&#entry1913141

http://community.invisionpower.com/...dule=search&do=quick_search&search_filter_app[forums]=1

Dit is een php script, wat je zelf zult moeten maken, zit niet in IP in.
logo.png



:cool:
 
Ik denk dat ik het maar eens met die css-code ga proberen, klinkt wel ok (ook al krijg je het lagspiegel effect).

Maar een vraagje; De img wordt gepost in een reply, maar ik weet niet waar dit onder valt. Waar moet ik deze code dan plaatsen?

Code: 
# waar de afbeelding inzit img{
width: aantal px;
height: aantal px;
}

CSS:
Code: 
BODY { 
font-family : Verdana, Tahoma, Arial, sans-serif; 
background-image : url(http://img706.imageshack.us/img706/9679/drsbgrunescape2.png); 
background-repeat : repeat-y; 
background-position : center; 
background-color : #000000; 
text-align : left; 
} 
TABLE, TR, TD { 
font-family : Arial, Verdana, Tahoma, Arial, sans-serif; 
font-size : 12px; 
color : #000000; 
} 
a:active, a:visited, a:link { 
text-decoration : underline; 
color : #000000; 
} 
a:hover { 
color : #dfc89d; 
text-decoration : underline; 
} 
fieldset.search { 
padding : 6px; 
line-height : 150%; 
} 
label { 
cursor : pointer; 
} 
form { 
display : inline; 
}
img.attach { 
border : 5px solid #eef2f7; 
padding : 2px;
} 
.googleroot { 
padding : 6px; 
line-height : 130%; 
} 
.googlechild { 
padding : 6px; 
margin-left : 30px; 
line-height : 130%; 
} 
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { 
font-size : 11px; 
color : #3a4f6c; 
} 
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { 
font-size : 14px; 
font-weight : bold; 
color : #00d; 
} 
.googlepagelinks { 
font-size : 1.1em; 
letter-spacing : 1px; 
} 
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { 
font-size : 10px; 
color : #434951; 
} 
li.helprow { 
padding : 0; 
margin : 0 0 10px 0; 
} 
ul#help { 
padding : 0 0 0 15px; 
} 
option.cat { 
font-weight : bold; 
} 
option.sub { 
font-weight : bold; 
color : #555; 
} 
.caldate { 
text-align : right; 
font-weight : bold; 
font-size : 11px; 
color : #000000; 
background-color : #dfc89d; 
padding : 4px; 
margin : 0; 
} 
.warngood { 
color : green; 
} 
.warnbad { 
color : red; 
} 
#padandcenter { 
margin-left : auto; 
margin-right : auto; 
text-align : center; 
padding : 14px 0 14px 0; 
} 
#profilename { 
font-size : 28px; 
font-weight : bold; 
} 
#calendarname { 
font-size : 22px; 
font-weight : bold; 
} 
#photowrap { 
padding : 6px; 
} 
#phototitle { 
font-size : 24px; 
border-bottom : 1px solid black; 
} 
#photoimg { 
text-align : center; 
margin-top : 15px; 
} 
#ucpmenu { 
line-height : 150%; 
width : 22%; 
border : 5px solid #dfc89d; 
background-color : #d0d0d0; 
} 
#ucpmenu p { 
padding : 2px 5px 6px 9px; 
margin : 0; 
} 
#ucpcontent { 
background-color : #d0d0d0; 
border : 5px solid #dfc89d; 
line-height : 150%; 
width : auto; 
} 
#ucpcontent p { 
padding : 10px; 
margin : 0; 
} 
#ipsbanner { 
position : absolute; 
top : 1px; 
right : 5%; 
} 
#logostrip { 
margin : 50px 50px 50px 50px;
border : 5px solid #4e412d; 
} 
#submenu img { 
display : none; 
} 
#submenu a:link, #submenu a:visited, #submenu a:active { 
color : #000; 
} 
#userlinks { 
border : 5px solid #4e412d; 
background-color : #2e2e2e; 
} 
#navstrip { 
font-size : 20px; 
font-weight : bold; 
padding : 6px 0 6px 0; 
} 
.activeuserstrip { 
background-color : #ffffff; 
padding : 6px; 
} 
.pformstrip { 
background-color : #d0d0d0; 
color : #000000; 
font-weight : bold; 
padding : 7px; 
margin-top : 1px; 
} 
.pformleft { 
background-color : #696969; 
padding : 6px; 
margin-top : 1px; 
width : 25%; 
border-top : 5px solid #c2cfdf; 
border-right : 5px solid #c2cfdf; 
} 
.pformleftw { 
background-color : #ffffff; 
padding : 6px; 
margin-top : 1px; 
width : 40%; 
border-top : 5px solid #c2cfdf; 
border-right : 5px solid #c2cfdf; 
} 
.pformright { 
background-color : #ffffff; 
padding : 6px; 
margin-top : 1px; 
border-top : 5px solid #c2cfdf; 
} 
.signature { 
font-size : 10px; 
color : #339; 
line-height : 150%; 
} 
.postdetails { 
font-size : 14px; 
font-weight : bold; 
} 
.postcolor { 
font-size : 15px; 
line-height : 160%; 
} 
.normalname { 
font-size : 10px; 
font-weight : bold; 
color : #003; 
} 
.normalname a:link, .normalname a:visited, .normalname a:active { 
color : #ffffff; 
font-size : 15px; 
} 
.unreg { 
font-size : 11px; 
font-weight : bold; 
color : #d0d0d0; 
} 
.post1 { 
background-color : #d0d0d0; 
} 
.post2 { 
background-color : #d0d0d0; 
} 
.postlinksbar { 
background-color : #d1dceb; 
padding : 7px; 
margin-top : 1px; 
font-size : 0; 
background-image : url(style_images/<#IMG_DIR#>/tile_sub.gif); 
} 
.row1 { 
background-color : #ffffff; 
} 
.row2 { 
background-color : #2e2e2e; 
} 
.row3 { 
background-color : #ffffff; 
} 
.row4 { 
background-color : #2e2e2e; 
} 
.darkrow1 { 
background-color : #d0d0d0; 
color : #2e2e2e; 
} 
.darkrow2 { 
background-color : #5e5e5e; 
color : #d0d0d0; 
} 
.darkrow3 { 
background-color : #ffffff; 
color : #3a4f6c; 
font-size : 15px; 
} 
.hlight { 
background-color : #dfe6ef; 
} 
.dlight { 
background-color : #eef2f7; 
} 
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { 
text-decoration : underline; 
color : #000000; 
} 
.maintitle { 
vertical-align : middle; 
font-weight : bold; 
color : #ffffff; 
padding : 8px 0 8px 5px; 
background-color : #5e5e5e; 
} 
.maintitle a:link, .maintitle a:visited, .maintitle a:active { 
text-decoration : none; 
color : #fff; 
} 
.maintitle a:hover { 
text-decoration : underline; 
} 
.plainborder { 
border : 5px solid #4e412d; 
background-color : #d0d0d0; 
} 
.tableborder { 
border : 5px solid #4e412d; 
background-color : #000000; 
padding : 0; 
margin : 0; 
} 
.tablefill { 
border : 5px solid #4e412d; 
background-color : #d0d0d0; 
padding : 6px; 
} 
.tablepad { 
background-color : #ffffff; 
padding : 6px; 
} 
.tablebasic { 
width : 100%; 
padding : 0 0 0 0; 
margin : 0; 
border : 0; 
} 
.wrapmini { 
float : left; 
line-height : 1.5em; 
width : 35%; 
} 
.pagelinks { 
float : left; 
line-height : 1.2em; 
width : 35%; 
} 
.desc { 
font-size : 12px; 
color : #dfc89d; 
} 
.edit { 
font-size : 9px; 
} 
.searchlite { 
font-weight : bold; 
color : #f00; 
background-color : #ff0; 
} 
#QUOTE { 
white-space : normal; 
font-family : Verdana, Arial; 
font-size : 11px; 
color : #465584; 
background-color : #fafcfe; 
border : 1px solid #000; 
padding-top : 2px; 
padding-right : 2px; 
padding-bottom : 2px; 
padding-left : 2px; 
} 
#CODE { 
white-space : normal; 
font-family : Courier, Courier New, Verdana, Arial; 
font-size : 11px; 
color : #465584; 
background-color : #fafcfe; 
border : 1px solid #000; 
padding-top : 2px; 
padding-right : 2px; 
padding-bottom : 2px; 
padding-left : 2px; 
} 
.copyright { 
font-family : Verdana, Tahoma, Arial, Sans-Serif; 
font-size : 9px; 
line-height : 12px; 
} 
.codebuttons { 
font-size : 10px; 
font-family : verdana, helvetica, sans-serif; 
vertical-align : middle; 
} 
.forminput, .textinput, .radiobutton, .checkbox { 
font-size : 11px; 
font-family : verdana, helvetica, sans-serif; 
vertical-align : middle; 
} 
.thin { 
padding : 6px 0 6px 0; 
line-height : 140%; 
margin : 2px 0 2px 0; 
border-top : 1px solid #fff; 
border-bottom : 1px solid #fff; 
} 
.purple { 
color : purple; 
font-weight : bold; 
} 
.red { 
color : red; 
font-weight : bold; 
} 
.green { 
color : green; 
font-weight : bold; 
} 
.blue { 
color : blue; 
font-weight : bold; 
} 
.orange { 
color : #f90; 
font-weight : bold; 
}
 
Dat bedoelde ik niet :P

Post #7:

Waar moet ik die code ergens plaatsen? Daar kom ik namelijk al een heel eind mee.

Thx
 
kan iemand hier nog even naar kijken? Post #7. Waar plaats ik dat stukje code in de CSS? Als ik alleen de width opgeef, past hij de height automatisch aan aan de afmetingen van de img. Dan werkt het.
 
Laatst bewerkt:
Hoi Flamedog,
Ik heb de css 3 kwartier besnuffeld, maar kwam er niet achter. Ook 's nachts onder m'n hoofdkussen leggen bleek niet te helpen. :rolleyes:
Ik kom steeds op hetzelfde probleem uit: zonder een html-code van een forumpagina (met zo'n geupload image er in) kan denk ik niemand er een zinnig woord over zeggen (behalve deze uitspraak dan). :(
Dus: heb je een link?

Met vriendelijke groet,
CSShunter
 
Als ik die link volg, krijg ik de melding "Je hebt niet de rechten om dit onderwerp te bekijken"
Als je trouwens alleen de breedte aanpast, krijg je niet dat 'lachspiegel'-effect, want dan blijven de verhoudingen intact.

Misschien kun je 't zelf simpel oplossen. Als je in Firefox Firebug installeert vanaf
https://addons.mozilla.org/nl/firefox/addon/1843
en je klikt in de knoppenbalk van Firebug op het blauwe pijltje bijna helemaal links, kun je daarna op de te grote afbeelding klikken. Je krijgt dan de bij die afbeelding horende html en css te zien. Dan kun je misschien zien waar je de maat moet opgeven.
 
foutje, nu kun je de topic wel zien. Die firefox addon zal niet helpen, aangezien ik er niet mee om kan gaan. dan ben ik helaas meer tijd kwijt dan uitproberen ;)

laatste post van dit topic hoop ik :), ik hoef alleen te weten waar in het css dat ergens moet.
 
Ja, dat is 'n heel klein beetje te breed :shocked:
Of 't 't helemaal oplost weet ik niet, maar 't gaat om de image binnen div.postcolor
Als ik daar bij die <img opgeef width="800", lijkt 't goed te gaan. Als je geen hoogte opgeeft, krijg je ook geen 'lachspiegel'-effect.
De src van de image is 147.tinypic.com / 6pc550.jpg (zonder spaties, maar anders wordt er 'n link van gemaakt).

Edit: je kunt natuurlijk ook de hoogte aanpassen. Dan gaat de breedte vanzelf ook mee.
 
Laatst bewerkt:
Gelukkig krijgen de door de bezoeker ge-uploade afbeeldingen in de html geen afmetingen mee van de forum-software, als ik de code zo zie. Dan kan je in de css proberen:
Code: 
[FONT="Courier New"][SIZE="2"].postcolor img {
   max-width: 600px;
   }[/SIZE][/FONT]
Grote afbeeldingen worden dan teruggebracht, en kleinere afbeeldingen worden nu niet opgeschaald. Anders worden kleintjes ook automatisch tot 600px breed opgeschaald, en krijg je bv. smiley's ter waarde van 600x600px. ;)

Mocht je IE6 een warm hart toedragen, dan kan denk ik lucht geven (in de <head>):
HTML: 
<!--[if lte IE 6]>
   <style type="text/css">
      .postcolor img {
         width: expression(Math.min(parseInt(this.offsetWidth), 600 ) + "px"); 
         }
   </style>
<![endif]-->
Tenminste, als je bij het css-stylesheet en bij de <head>-php van de pagina kunt komen. Dat hoop ik maar!

Met vriendelijke groet,
CSShunter
 
Oeps, die van csshunter is veel beter, als dat lukt. Ik had niet aan kleinere afbeeldingen gedacht, die dan inderdaad worden vergroot...
 
Ik had er ook niet aan gedacht, maar toen ik in FF Webdeveloper de css editte om een mooie breedte te vinden, zag ik opeens twee lellen van smiley's. Even later drong het tot me door waarom. De dader zat vlakbij! :D
 
csshunter: topwerk! :thumb:Alleen 1 klein nadeel (in IE, kheb nog geen firefox geprobeerd): De plaatjes worden wel goed verkleind, alleen de originele breedfte van het plaatje wordt nog aangehouden.

Dus zegmaar: het forum doet alsof het plaatje niet geresized is, en maakt het alsnog extra breed. Heb je hier een verklaring voor :rolleyes:?
 
Zojuist met Google Chrome getest, werkt perfect. Alleen IE 8 werkt het niet, zie vorige post
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan