Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2273[/thread]

max-width im IE



<< >> 10 Einträge, 1 Seite
pKai
 2005-10-03 01:38
#24588 #24588
User since
2005-02-18
357 Artikel
BenutzerIn
[default_avatar]
Ich habe folgendes HTML
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<style type="text/css" media="screen">
#content
{
    margin: 0 100px 0 100px;
    padding: 1em;
    background-color: yellow;
}
.stretch img {
    width: 100%;
}
</style>
</head>

<body>
<div id="content">
<div class="stretch">
<img src="image.jpg" alt="" style="max-width:200px" />
</div>
</div>
</body>
</html>
Dadurch passt sich die Anzeige des Bildes an die jeweilige Größe des Fensters an.
Bei Beachtung von max-width aber nicht über die angegebene Breite (hier: 200px) hinaus.
Leider ignoriert der IE (6) max-width und lässt das Bild beliebig mit dem Browser-Fenster mitwachsen, was ich nicht möchte.
Welche Möglichkeiten habe ich den IE zu einem ähnlichen Verhalten wie max-width zu überreden?

Edit: fehlte ein [tt]</div>, was aber nichts am Ursprungsproblem ändert[/tt]\n\n

<!--EDIT|pKai|1128336008-->
I sense a soul in search of answers.
renee
 2005-10-03 14:03
#24589 #24589
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
Das könnte daran liegen, dass es ein CSS2-Property ist und soweit ich weiß unterstützt der IE (noch) nicht alles von CSS2...
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
pKai
 2005-10-03 14:51
#24590 #24590
User since
2005-02-18
357 Artikel
BenutzerIn
[default_avatar]
@renee: Ist schon soweit klar.

Was ich suche ist ein workaround für den IE, da ich verhindern möchte, dass die Bilder über ein gewisses Maß vergrößert angezeigt werden. Sie sollen aber mit dem Fenster mitschrumpfen.
I sense a soul in search of answers.
GwenDragon
 2005-10-03 15:10
#24591 #24591
User since
2005-01-17
14542 Artikel
Admin1
[Homepage]
user image
Per CSS nicht.
Geht wohl nur mit Javascript (und einem eventhandler für images? - nicht ausprobiert)!

Könnte so gehen:
Code: (dl )
1
2
3
4
5
6
var oldwidth = document.getElementByName['Bild1'].width;
// oder 
// var oldwidth = document.Bild1.width;
var newwidthmax = 100;
var factor = oldwidth>newwidthmax ? newwidthmax / oldwidth : 1;
document.getElementByName('Bild1').width=factor * oldwidth;
Schnipsel nicht getestet

Das ist halt der Mist, wenn so manche Browser sich nicht ans Standards halten.\n\n

<!--EDIT|GwenDragon|1128337958-->
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
Tom
 2005-10-03 21:10
#24592 #24592
User since
2003-09-20
470 Artikel
BenutzerIn
[Homepage] [default_avatar]
[quote=GwenDragon,03.10.2005, 13:10]Das ist halt der Mist, wenn so manche Browser sich nicht ans Standards halten.[/quote]
Solche Browser sollte man boykottieren!

Tom
Computerprobleme??? -> http://www.weber-computerhilfe.de

Fordere keine Anerkennung!
Zeige was und man wird Dich kennen
pKai
 2005-10-04 01:39
#24593 #24593
User since
2005-02-18
357 Artikel
BenutzerIn
[default_avatar]
@GwenDragon: Das hatte ich befürchtet. Ich habe das mal probiert und bin dabei auf folgendes Problem gestoßen:
Zwar nimmt er eine Zuweisung auf .height an, aber die an .width wird ignoriert.
Offenbar kann ich die
Code: (dl )
width : 100%
aus dem style so nicht überschreiben :blues:

Edit: Hm, dachte, dann vielleicht die width des parentNode (div) setzen. Aber das ignoriert er auch. FF verhält sich genauso (beim setzen aus Javascript). Grübel...\n\n

<!--EDIT|pKai|1128376734-->
I sense a soul in search of answers.
GwenDragon
 2005-10-04 06:36
#24594 #24594
User since
2005-01-17
14542 Artikel
Admin1
[Homepage]
user image
[quote=Tom,03.10.2005, 19:10][quote=GwenDragon,03.10.2005, 13:10]Das ist halt der Mist, wenn so manche Browser sich nicht ans Standards halten.[/quote]
Solche Browser sollte man boykottieren!

Tom[/quote]
Schlaumeier.
Was nutzt es den IE zu boykottieren? Viel Leute surfen aus Unwissenheit mit dem Ding, weil Microsoft den mit Windows installiert und er umsonst ist.
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
renee
 2005-10-04 10:30
#24595 #24595
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
[quote=GwenDragon,04.10.2005, 04:36][...] weil Microsoft den mit Windows installiert und er umsonst ist.[/quote]
Stimmt, der ist völlig umsonst und auch kostenlos *g*\n\n

<!--EDIT|renee|1128407680-->
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
pKai
 2005-10-04 11:35
#24596 #24596
User since
2005-02-18
357 Artikel
BenutzerIn
[default_avatar]
Auf mein zuletzt beschriebenes Problem zurückkommend:

Hier ein funktionierender Prototyp:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<style type="text/css" media="screen">
#content
{
   margin: 0 100px 0 100px;
   padding: 1em;
   background-color: yellow;
}
.stretch img {
   width: 100%;
}
</style>
<script type="text/javascript">
function CorrSize(imgName,maxWidth) {
    if (! document.getElementsByName) return;
    var ImgList = document.getElementsByName(imgName);
    for (var i = 0; i < ImgList.length; ++i) {
        var aktWidth = ImgList[i].width;
        if (maxWidth < aktWidth) {
            var fak = maxWidth / aktWidth
            ImgList[i].width = maxWidth
            ImgList[i].height = ImgList[i].height * maxWidth / aktWidth
        }
    }
}
</script>
</head>

<body>
<div id="content">
<div class="stretch">
<img src="http://board.perl-community.de/iB_html/non-cgi/Skin/SKIN-3/images/pc_logo.png" alt="" name="ImgStr" style="max-width:550px" />
</div>
<p><a href="javascript:CorrSize('ImgStr', 300)">CorrSize</a></p>
</div>
</body>
</html>
mit dem Kamel-Bild vom Board, damit alle das Gleiche sehen.
Native Breite des Bildes ist 550px. Wenn man die Seite öffnet und genug Fensterbreite hat (Bildbreite > 300) wird sich bei Klick auf "CorrSize" (und aktiviertem javascript in DOM-fähigem Browser) was tun: Jedenfalls wird bei mir die Höhe (korrrekt) angepasst, die Breite aber nicht.
Getestet mit IE und Firefox.
Wie ist das zu lösen?
I sense a soul in search of answers.
pKai
 2005-10-06 15:45
#24597 #24597
User since
2005-02-18
357 Artikel
BenutzerIn
[default_avatar]
OK, das folgende ist zwar nicht schön, aber scheint das zu tun was ich will.
Da alles IE-spezifische über IE-Conditional-Comments hereingezogen wird, sollten andere Browser nicht beeinflusst werden?!
Die Lösung benötigt Javascript... aber wer mit dem IE surft, hat das ja sowieso an... ???
bzw. der Falback auf "width:auto" muss es ansonsten tun.

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE-gemurkse</title>
<style type="text/css" media="screen">
#content
{
   margin: 0 100px 0 100px;
   padding: 1em;
   background-color: yellow;
}
.stretch img {
   width: 100%;
}</style>

<!--[if IE]>
<style type="text/css" media="screen">
.stretch img {
   width: auto;
}
</style>
<script type="text/javascript">
function CorrSize(imgName) {
    if (! document.getElementsByName) return;
    var ImgList = document.getElementsByName(imgName);
    for (var i = 0; i < ImgList.length; ++i) {
        var aktWidth = ImgList[i].width;
        var newWidth = document.body.clientWidth - 2 * ImgList[i].offsetLeft
        var maxW = parseInt(ImgList[i].style.getAttribute('max-width'))
        var maxH = parseInt(ImgList[i].style.getAttribute('max-height'))
        if (newWidth > maxW) {
            ImgList[i].width = maxW
            ImgList[i].height = maxH
        } else {
            ImgList[i].width = newWidth
            ImgList[i].height = maxH * newWidth / maxW
        }
    }
}
function iewa () {CorrSize('ImgStr')}
window.onload = iewa
window.onresize = iewa
</script>
<![endif]-->

</head>

<body>
<div id="content">
<div class="stretch">
<img
src="http://board.perl-community.de/iB_html/non-cgi/Skin/SKIN-3/images/pc_logo.png"
alt="" name="ImgStr" style="max-width:550px;max-height:150px" />
</div>
</div>
</body>
</html>
\n\n

<!--EDIT|pKai|1128599694-->
I sense a soul in search of answers.
<< >> 10 Einträge, 1 Seite



View all threads created 2005-10-03 01:38.