Thread max-width im IE (9 answers)
Opened by pKai at 2005-10-03 01:38

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.

View full thread max-width im IE