CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

fitty Nybegynder

07. august 2008 - 16:06 Der er 23 kommentarer og
1 løsning

Maks størrelse på billede

Hej allesammen. Jeg har et spørgsmål

Er det muligt at gøre sådan et et billede maks må være f.eks 400 px bredt?

Jeg har en billede hosting side, hvor gratis kan uploade og få hosted deres billeder. Problemet er så at når det bliver fremvist variere størrelsen meget hvilket nogle gange (hvis billedet er alt for stort) ødelægger mit design. Jeg havde tænkt på at gøre sådan at billedet maks må være 400 px bredt og højt px (men dog stadig beholde sin dimesion) og hvis brugeren så ville have billedet i en sin naturlige størrelse ville der være et link til billedet som viser billedet uden noget design omkring.

Men jeg vil jo så hellere ikke have at et billede som med målene 150X200 bliver strukket ud til 300X400. Så er der en måde at gøre sådan at billedet maks må have en størrelse på 400 px på en side?

Synes godt om

ssv Nybegynder

07. august 2008 - 16:07 #1

Du kan lave en img { max-width: 400px; }

Det skal dog siges at den ikke er kompatibel i IE 6.0, hvor du derimod kan lave en %-størrelse til de (uheldige) brugere der stadig bruger IE 6.0 :-)

Synes godt om

w13 Novice

07. august 2008 - 16:08 #2

Ja, du kan måske bruge max-width.

Ellers må du gøre det med JavaScript.

Synes godt om

w13 Novice

07. august 2008 - 16:11 #3

F.eks.:

<img id="billed1" src="billed.jpg">

<script type="text/javascript">
function maxWidth(o,iWidth,iHeight){
if(iWidth>0&&o.offsetWidth>iWidth)o.style.width=iWidth+"px";
if(iHeight>0&&o.offsetHeight>iHeight)o.style.height=iHeight+"px";
}

maxWidth(document.getElementById("billed1"),400,450);
</script>

Her kalder jeg funktionen med maxWidth(billedet,bredden,højden)

Synes godt om

enhydralutris Nybegynder

07. august 2008 - 16:29 #4

<img src="blah.jpg" width="400px">

jeg kan ikke se hvorfor den ikke skulle virke?

Synes godt om

enhydralutris Nybegynder

07. august 2008 - 16:32 #5

har lige testet "<img src="blah.jpg" width="400px">"

og den virker fint hos mig :-)

Synes godt om

ssv Nybegynder

07. august 2008 - 16:36 #6

enhydralutris > Du forvrider billedets format. Hvis nu et billede er 1250 x 1000 og du sætter en width på 400, forstrækker den jo billedet noget så forfærdeligt.

Max-width beholder derimod billedets proportioner. :-)

Synes godt om

mclemens Nybegynder

07. august 2008 - 16:56 #7

ssv > Hvis du kun sætter enten width eller height forvrider man ingen proportioner.
- Prøv evt. selv med et billede. (jeg vil nok sætte width i css istedet style="width:400px;"

... Men forskellen på max-width vs. width er dog at max-width ikke udvider et billede
på f.eks. 100px width, mens det gør width ... så en løsning på IE 6, dog med uvidelse af billedets størrelse deri kan være

<div><img src="noget.jpg" class="billede400"></div>

og så css:
.billede400{width:400px;}
div > .billede400{width:auto;max-width:400px;}

(hvor div erstattes af det element der omkranser img elementet)

Synes godt om

fitty Nybegynder

07. august 2008 - 22:34 #8

Jeg har indsat dette i bunden af min style.

.billede400{width:400px;}
div > .billede400{width:auto;max-width:400px;}

og så ser mit billede sådan her ud

<div> <center><img src="<?=$folder.$_GET['fil'];?>" class="billede400" /></center></div>

Men det gør at alle billeder for en brede på 400px. Også dem der er mindre. Hvad gør jeg forkert?

Synes godt om

fitty Nybegynder

07. august 2008 - 23:21 #9

Har fundet http://www.w3schools.com/htmldom/prop_style_maxwidth.asp

<html>
<head>
<script type="text/javascript">
function setMaxWidth()
{
document.getElementById("p1").style.maxWidth="10px";
}
</script>
</head>
<body>

<p id="p1">This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

<input type="button" onclick="setMaxWidth()"
value="Set max width" />

</body>
</html>

Dette er det eksempel som de viser med javascript. Det eneste problem er dog at brugeren selv skal ind og trykke på input knappen i bunden. Er der nogen måde hvorpå at det kan gøres sådan at det hele siden er "setMaxWidth()"??

Synes godt om

mclemens Nybegynder

07. august 2008 - 23:25 #10

Det nærmeste omkransende element er i dit tilfælde ikke et div element, men det center element, du har wrappet omkring img elementet - og du skal derfor rette div til center i css delen.

Synes godt om

mclemens Nybegynder

07. august 2008 - 23:29 #11

- Det svarer så til at sætte css'en fra 07/08-2008 16:07:40
via. javascript. Hvis man på nogen måde har mulighed for at
lave det direkte via. css istedet så er 23:21:58 ligesom at
gå over åen efter vand. (Det eneste tilfælde hvor man "kan"
have problemer med at sætte det direkte som css er så vidt
jeg kan komme på ved dynamisk oprettede elementer)

Synes godt om

fitty Nybegynder

07. august 2008 - 23:32 #12

mclemens>> Det hjælper ikke hvis jeg flytter <div> ind før <center>.

Men du har ikke end ide til hvordan jeg får det ovenstående javascript til at virke? Det ser ud til at virke fint, men hvordan gøre jeg sådan at brugeren ikke skal ind og trykke på knappen før billedet har den rigtige størrelse...

Synes godt om

fitty Nybegynder

07. august 2008 - 23:38 #13

jamen når det nu ikke virker med CSS

Synes godt om

mclemens Nybegynder

07. august 2008 - 23:39 #14

Denne virker i min IE7 og FF3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.billede400{width:400px;}
div > .billede400{width:auto;max-width:400px;}

</style>

</head><body>

<center><div><img src="http://www.eksperten.dk/img/elogo.png" class="billede400" /></div></center>

</body></html>

det samme gør denne:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.billede400{width:400px;}
center > .billede400{width:auto;max-width:400px;}

</style>

</head><body>

<div><center><img src="http://www.eksperten.dk/img/elogo.png" class="billede400" /></center></div>

</body></html>

Synes godt om

fitty Nybegynder

07. august 2008 - 23:44 #15

Ved ikke hvad der skete men nu virker det med CSS. Mange tak for hjælpen mclemens. Du har dog ikke svaret på noget endnu så ingen points til dig... (endnu) ;)

Ej men mange tak for hjælpen...

Synes godt om

fitty Nybegynder

07. august 2008 - 23:45 #16

Og dog. har lige prøvet med et mindre billede. Dette billede bliver får også bredden 400...... Hvad er der gået galt?

Synes godt om

mclemens Nybegynder

07. august 2008 - 23:47 #17

Ja, du kan udskifte
function setMaxWidth()
med
window.onload=function()

- og så sætte id'et på billedet, men øhm ved stadig ikke hvorfor at du ikke kan få 07/08-2008 16:07:40 til at virke - hvis scriptet vil virke så virker css'en nu også, det er begge dele css uanset om det sætte ind med css eller om det sættes med javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.billede40{max-width:40px;}
</style>

</head><body><img src="http://www.eksperten.dk/img/elogo.png" class="billede40"></body></html>

Det nok eneste tilfælde 07/08-2008 16:07 ikke vil virke er IE<7, der kan du så bruge 07/08-2008 16:56:47 med ulempen det giver (udvidelse af mindre billeder i IE<7) eller prøve w13's script i 07/08-2008 16:11:41 ... 07/08-2008 23:21:58 er ikke bedre i IE<7 end 07/08-2008 16:07:40 (det er det samme bortset fra at javascriptet til at sætte css'en virker øhm, "ikke så smart".

Synes godt om

mclemens Nybegynder

07. august 2008 - 23:49 #18

07/08-2008 23:45:58
a) Husker du at sætte classen på billedet rigtigt ?
b) Er billedet indsat med det rigtige omkransende element ligesom i 07/08-2008 23:39:58 og den dertil hørende css del ?
c) Hvilken browser er det du benytter, hvis ovenstående to ting er iorden ?

Synes godt om

mclemens Nybegynder

07. august 2008 - 23:51 #19

- Og d)
Har du en fuldstændig doctype som i 07/08-2008 23:39:58 til at starte med, så IE ikke går i quirks mode ?

Synes godt om

fitty Nybegynder

07. august 2008 - 23:56 #20

Så virker det endelig. Der manglede <div> omkring dem. Det er der kommet nu og både store og små billeder virker.

Synes godt om

mclemens Nybegynder

08. august 2008 - 00:03 #21

Ok, så er der lige et svar, men jeg vil helst dele med
ssv - da min tilføjelse kun er en meget lille udvidelse
af ssv's (som er god eller dårlig afhængig af billede
størrelsen ...)

Alternativt til alt det her - hvis du kan måle på det oploadede billedet's
width kan du undlade at outputte en class, hvis det er under 400px i width

og hvis det er over 400px i width kan du du outputte class="w400" på img'et
og så css:

.w400{width:400px;}

(width vil så kun, grundet den begrænsede output af class'en,
fungere som en minimering og ikke en udvidelse af billedet)

Synes godt om

ssv Nybegynder

08. august 2008 - 00:26 #22

Jeg bøjer mig i støvet ;-)

Synes godt om

mclemens Nybegynder

08. august 2008 - 01:13 #23

ssv > http://www.eksperten.dk/spm/840861

fitty et eksempel i php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.w400{width:400px;}
</style>

</head><body>

<?php
$file="10.jpg";
$imgsize=getimagesize($file);

echo"<img src=\"".$file."\"".($imgsize[0]>400?" class=\"w400\"":"").">";
?>

</body></html>

Synes godt om

mclemens Nybegynder

08. august 2008 - 01:14 #24

Og tak for point :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS