Søg
Avatar billede trer Nybegynder
23. august 2005 - 14:38 Der er 19 kommentarer og
2 løsninger

Image stretch?

hej

Jeg har brug for at et image streches til en celles højde i en tabel mens det låses til en fast bredde i pixel.

a la dette (der ikke fungerer da height releateres til gif'ens størrelse og ikke cellen).

<TD><IMG SRC="xx.gif" HEIGHT="100%" WIDTH="16"></TD>

Om det laves som en IMG tag eller som en CSS-background er ligegyldigt (omend jeg vil foretrække CSS).

Løsningen skal være browser-uafhængig (eller i hvert fald supportere IE og Firefox)

Mvh
Troels
Avatar billede roenving Novice
23. august 2005 - 14:44 #1
Du sætter bare en højde på tabelcellen (hvilken doctype bruger du ?-)

<td style="height:300px;"><img src="xx.gif" style="height:100%;width:16px"></td>
Avatar billede softspot Forsker
23. august 2005 - 14:46 #2
Jeg fik flg til at fungere i IE og FF:

<style type="text/css">
#stretch {height:100%; width:30px;}
</style>

<img id="stretch" src="det-der-billede.jpg">
Avatar billede softspot Forsker
23. august 2005 - 14:46 #3
...men det er jo egentlig også det roenving siger :)
Avatar billede trer Nybegynder
23. august 2005 - 14:53 #4
Roenving, tak, men at låse højden på cellen er ikke løsningen - den skal netop være dynamisk. Jeg beklager at jeg ikke var tydelig nok vedr. dette i spørgsmålet.

Softspot, læg et svar.

Din løsning fungerer med dynamisk cellehøjde hvilket jeg har behov for.

Mvh
troels
Avatar billede softspot Forsker
23. august 2005 - 15:05 #5
Hmm... jeg vil nødig virke utaknemlig, men roenvings faste højde på tabelcellen var vel blot for at illustrere at billedet ville strække sig hvis  containeren var højere end billedet... eller tager jeg fejl roenving?

Jeg synes i eksperten.dk's ånd at roenving gav svaret først og derfor fortjener point for dette.

Som sagt jeg vil ikke være utaknemlig og hvis roenving eller du, trer, er uenig tager jeg gerne point for besvarelsen, men under hensyntagen til ovenstående holdning... :)
Avatar billede roenving Novice
23. august 2005 - 15:16 #6
Nu er jeg ret overbevist om, at min kun vil virke i et fuldt korrekt html-dokument, hvilket jeg ikke er helt overbevist om, er tilfældet her !-)
Avatar billede softspot Forsker
23. august 2005 - 15:26 #7
Betyder det at du ikke vil have point roenving...?
Avatar billede trer Nybegynder
23. august 2005 - 15:27 #8
Hov hov Roenving - Mine ting plejer da at virke i W3orgs validator... i hvert fald når jeg er færdig i første udgave - senere kan det godt skride :-)

Men faktisk fokuserede jeg blot på Roenvings tekst og så style på TD-tag'en - jeg bemærkede ikke at Roenving derudover havde en inline style på IMG-tag'en og at løsningerne ellers var ens.

Læg et svar begge to - så deler i points'ne.

Mvh
Troels
Avatar billede roenving Novice
23. august 2005 - 15:29 #9
Oki '-)
Avatar billede roenving Novice
23. august 2005 - 15:38 #10
-- og tak for point ;~}
Avatar billede softspot Forsker
23. august 2005 - 15:41 #11
ditto! :)
Avatar billede olebole Juniormester
23. august 2005 - 15:41 #12
<ole>

trer >> Det er en ringe trøst, din kode validerer. Derfor kan den jo godt være hamrende fyldt med fejl  ;o)

Hvis du sætter en højde på 100% på et billede i en tabel-celle, der ikke har fået sat en højde, bliver dit billede 0px højt - hvilket er helt ifølge CSS.

Med mindre du har disabled CSS i dit dokument, så _skal_ højden sættes på det omkransende element, når du sætter en relativ højde på et element ... ellers virker det ikke  :)

/mvh
</bole>
Avatar billede trer Nybegynder
23. august 2005 - 15:47 #13
Ole>> Jah - hvis det var det eneste der var i tabellen var en række med en celle med nævnte image.

Men da der er andre celler i tabellen og disse indeholder alm. tekst er det ikke et problem idet min "image-stretch celle" så får en højde ud fra disse.
Avatar billede olebole Juniormester
23. august 2005 - 16:06 #14
Billedet skal ifølge CSS blive præcis 100% af den højde, det omkransende element har fået sat ... og så er det ligegyldigt, hvor høj cellen ellers er blevet p.gr.a. indhold.
Eller rettere: Sådan burde det være, men her opfører ingen af browserne sig efter standarden - omend IE synes at komme tættest  :)

IE, FF og Opera har faktisk hver sit bud på dette:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="1">
<tr>
    <td>jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br></td>
    <td style="height:200px"><img src="http://www.eksperten.dk/img/elogo.png" style="height:100%"></td>
</tr>
<tr>
    <td>jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br></td>
    <td><img src="http://www.eksperten.dk/img/elogo.png" style="height:100%"></td>
</tr>
</table>

</body>
</html>
Avatar billede olebole Juniormester
23. august 2005 - 16:10 #15
Denne er de mere enige om - selvom Opera ikke overraskende stadig fucker up:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="1">
<tr>
    <td>jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br></td>
    <td style="height:200px"><div style="height:100%;width:100px;background-color:red">&nbsp;</div></td>
</tr>
<tr>
    <td>jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br>
        jlkjlkjljk<br>iuoiuoiu<br>oiupouipoiu<br></td>
    <td><div style="height:100%;width:100px;background-color:red">&nbsp;</div></td>
</tr>
</table>

</body>
</html>
Avatar billede trer Nybegynder
23. august 2005 - 16:37 #16
ole>> Du har fuldstændig ret - beklager afvisningen i første omgang. Fjernes style på tabellen nedenfor bliver billedet 0 pixel i IE.

<table style='height:100%'>
<tr>
  <td rowspan=2><img style='height:100%'..></td>
  <td>dummy 1</td>
</tr>
<tr>
  <td>dummy 2</td>
</tr>
</table>

Mvh
Troels
Avatar billede olebole Juniormester
23. august 2005 - 17:01 #17
aha ... så har du disabled CSS i dit dokument  :)
Tjek forskellen på disse to dokumenter, hvoraf det sidste har fået disabled CSS' box-model:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<table style='height:100%'>
<tr>
  <td rowspan=2><img src="http://www.eksperten.dk/img/elogo.png" style='height:100%'></td>
  <td>dummy 1</td>
</tr>
<tr>
  <td>dummy 2</td>
</tr>
</table>

</body>
</html>

- og:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<table style='height:100%'>
<tr>
  <td rowspan=2><img src="http://www.eksperten.dk/img/elogo.png" style='height:100%'></td>
  <td>dummy 1</td>
</tr>
<tr>
  <td>dummy 2</td>
</tr>
</table>

</body>
</html>

DTD'en gør forskellen. Med den fulde DTD (med definitions-URL) overholdes CSS langt bedre i IE. Læs evt:
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
- under 'Doctype Switch'.

Du skal være forberedt på, at hvis du indsætter den viste DTD, vil din side nok se en del anderledes ud. Det skyldes blot, at din CSS er temmelig forkert, som den er nu  :)
Avatar billede olebole Juniormester
23. august 2005 - 17:02 #18
- i de to dokumenter, jeg viste, skal du naturligvis prøve at fjerne højden på tabellen  ;o)
Avatar billede olebole Juniormester
23. august 2005 - 17:05 #19
- du kan også prøve dette dokument med og uden URL'en i DTD'en:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<div style="width:200px;height:200px;background-color:yellow;border:50px solid red">&nbsp;</div>

<div style="width:200px;height:200px;background-color:yellow">&nbsp;</div>

</body>
</html>

- så er forskellen på DTD'erne meget tydelig ... og det er dokumentet med URL'en, der vises korrekt i IE  :)
Avatar billede trer Nybegynder
07. september 2005 - 15:26 #20
olebole> tak for linket om standard "enabling" i IE.  Det er perfekt!
Avatar billede olebole Juniormester
07. september 2005 - 16:00 #21
- selvtak  ;o)
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
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 12:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »