Avatar billede esbenn Nybegynder
07. oktober 2007 - 10:40 Der er 16 kommentarer og
1 løsning

DIV udvider sig

Hej Eksperter :-)

Jeg har et problem med at når jeg indsætter et billede i en div der er større end selve min Div, bliver billedet i sin originale størelse og presser derfor bare min DIV til at være større.. Håber i forstår?! :-D
Den hurtige besvare vil så bare sige: " Lav width="300px" i dit IMG tag", men NEJ, dette er ikke løsningen da mit billiede link bliver hentet fra en database, og derfor ved jeg ikke om billedet er mindre end de 300 px det må fylde MAX... Hvis den er mindre og jeg laver en fast width bliver billedet utroligt grimt fordi det bliver strukket ud, så derfor holder det ikke.. Håber i måske kan hjælpe mig... Lige nu ser mit CSS sådan ud:

#main .billedboks {
    margin: 0 0 0 -350px;   
    position: absolute;
    width: 300px;
}
#main .billedboks img {
    border: 5px solid #ffffff;
    float: right;   
}

På forhånd tak for hjælpen!
Avatar billede keysersoze Guru
07. oktober 2007 - 10:48 #1
jeg går ud fra at der heller ikke kan pilles ved din div så den fx skjuler alt overflow i den? I så fald er dit problem lidt problematisk at løse vha css - det bedste resultat kan du nok få hvis du loader billedet gennem et billedkomponent (det må du næsten have adgang til gennem dit serverside-sprog når du kan tale sammen med en database), her kan du tjekke dimensionerne på billedet og hvis det er større end X antal pixel kan du resize det inden output til brugeren.
Avatar billede esbenn Nybegynder
07. oktober 2007 - 10:57 #2
Jo, jeg kan godt skjule overflow, men så bliver billedet bare et lidt underligt hvis alt det overskydende bare forsvinder?! Man skulle jo gerne kunne se hele billedet...

Men det er ikke noget der hedder at #main .billedboks img { skal have en max width eller sådan noget?!
Avatar billede keysersoze Guru
07. oktober 2007 - 11:24 #3
nej - du vil altid skulle angive en specifik bredde og det er derfor billedmanipulation på serveren vil give det bedste resultat.
Avatar billede esbenn Nybegynder
07. oktober 2007 - 12:13 #4
Kan du ASP?! :-D Så kunne du jo hjælpe mig videre? :P
Avatar billede keysersoze Guru
07. oktober 2007 - 12:35 #5
ja - jeg kan asp, men asp har ingen indbyggede komponenter til dette så der kan ikke "bare" gives en kode. Du skal finde ud af hvilket image-komponent dit webhotel har (hvis de altså har nogle - ellers er du på den) og så er det forholdsvis lige til at lave sådan et script hvis du følger dokumentationen til komponenten.
Avatar billede johan.o Nybegynder
07. oktober 2007 - 13:24 #6
Hm, mon ikke du blot kan lave en preload funktion af billedet, checke hvor bredt det er, og så sætte width derefter. Alt sammen i html/javascript.

Mvh. Johan
Avatar billede johan.o Nybegynder
07. oktober 2007 - 13:53 #7
..måske du kan bruge det her til noget..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Eksperten 799859</title>
<style type="text/css"></style>
<script type="text/javascript">

function Set_Image_Width() {
oShownImage = document.getElementById("billede");
oPreloadImage = new Image();

oPreloadImage.onload = function() {
  if(oPreloadImage.width>300) { oShownImage.width = 300; } }

oPreloadImage.src = oShownImage.src; }

</script>
</head>

<body onload="Set_Image_Width();">

<div style="width: 300px; border: 1px solid red;">
<img src="billede1.jpg" id="billede" alt="Billede af spændende ting">
</div>

</body>
</html>

Mvh. Johan
Avatar billede johan.o Nybegynder
07. oktober 2007 - 13:58 #8
..og så er det vel egentlig en tilsnigelse at kalde det et preload image, når det rent faktisk først loades efter <body onload> kaldet :)...

Mvh. Johan
Avatar billede keysersoze Guru
07. oktober 2007 - 14:40 #9
der kan være store ulemper ved en js løsning - primært skal klienten selvfølgelig understøtte js og derudover skal klienten stadig downloade hele billedet i den oprindelige størrelse og ikke kun det nødvendige.
Avatar billede olebole Juniormester
07. oktober 2007 - 16:17 #10
<ole>

Hvorfor overhovedet vise billedet i en anden størrelse, end den det har? Hvorfor har billedet en anden størrelse, end den det skal bruges i?

/mvh
</bole>
Avatar billede esbenn Nybegynder
07. oktober 2007 - 17:51 #11
Fordi det skal passe ind i mit lidt underlige design.. :-D
Avatar billede olebole Juniormester
07. oktober 2007 - 19:16 #12
Nej, dine billeder passer ikke ind i dit design - og det må vel være dit design, der dikterer størrelsen af dine billeder. Beskær billederne ... så er du ude over alle problemerne  ;o)
Avatar billede esbenn Nybegynder
08. oktober 2007 - 15:56 #13
Nej... For det er jo ikke mig der ligger billeder op, jeg har lavet en side for en der ikke kan finde ud af at rode med billeder eller hjemmeside, så når han skriver et link til et billede uden at vide hvor stort det er, skal det kunne passe ind...
Avatar billede olebole Juniormester
08. oktober 2007 - 16:59 #14
Kan man ikke lave mad, kan man ikke levere varen i et restaurations køkken.
Hvis man ikke kan skrive, kan man ikke levere indhold til et website.
Hvis man ikke kan beskære et billede, kan man ikke levere billeder til et website.

Ligesom man ikke bare går hen og køber en restaurant og tror, den kører sig selv, uden man behøver lære noget om at drive den - går man ikke hen og bestiller et website og tror, det kører sig selv.

Han må da bare gøre en indsats ... hvor svært kan det være?  :)
Avatar billede olebole Juniormester
08. oktober 2007 - 17:01 #15
- og du gør det naturligvis nemt for ham, så han kun skal vælge mellem tre/fire størrelser. Evt. kunne du endda automatisk beskære billederne til den af ham valgte størrelse ved upload
Avatar billede keysersoze Guru
08. oktober 2007 - 18:02 #16
ulempen ved at resize/croppe ved upload er, at billederne så kun kommer til at passe til det specifikke design - foretager man først den handling ved visning af billedet og man ud over det problemer (og giver mere arbejde til serveren selvfølgelig)
Avatar billede keysersoze Guru
16. december 2007 - 10:57 #17
lukketid?
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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