PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [html] bild skalieren



red.iceman
23-07-2003, 11:31
Hallo zusammen,

ich habe folgendes Problem: Ich probiere mich gerade an html aus und möchte, daß sich die Seitenbreite der breite des Browserfensters anpaßt. Das geht soweit mit width="xx%" ganz gut, nur gerade Bilder würde ich gerne nur in einem gewissen Bereich skalieren lassen, also z.B. soll das Bild eine Breite von 90% haben, aber mindestens 400px und höchstens 700px breit.
Wie mach ich sowas??

ri

pitu
23-07-2003, 11:36
mit css: max-width und max-height, allerdings koennen das noch nicht alle Browser.

gruss,
pitu

red.iceman
23-07-2003, 12:20
Danke - sowas hab ich gesucht.
Leider scheint es erst ab Netscape 6 und IE 6 zu funktionieren - gibt es noch eine andere Möglichkeit? Eine Art "workaround" oder eine Lösung in css1 bzw. html?

ri

pitu
23-07-2003, 16:22
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#min_width

gruss,
pitu

Jana
23-07-2003, 20:23
Schau mal bei http://www.cross-browser.com vorbei.

Mit folgendem Code kannst du jede Box "lay1" beliebig festlegen:


var lay1;
function windowOnload() {
with (lay1 = cbeGetElementById('lay1').cbe) {
resizeTo(document.cbe.width()/3,document.cbe.height()-100); //*****Größe
moveTo(document.cbe.width()/3+300,50); //****Position
show(); }


Ein Code zu Image resize


<html >
<head>
<style type='text/css'><!--
html { margin:0; padding:0; }
body {
color:#000;
background:#fff;
margin:0; padding:0;
font-family:verdana,arial,sans-serif; font-size:12px;
}
.clsCBE {
position:absolute; visibility:hidden;
color:#000000; background:#ffffff;
margin:0; padding:0;
}
--></style>
<script type='text/javascript' src='../cbe/cbe_core.js'></script>
<script type='text/javascript'><!--
function windowOnload() {
with (cbeGetElementById('id1').cbe) {
background('#ffffff');
moveTo('center');
show();
}
}
function doSubmit() {
var w = document.forms['f1'].w.value;
var h = document.forms['f1'].h.value;
var u = document.forms['f1'].u.value;
var e = cbeGetElementById('id1').cbe;
e.innerHtml("<img src='"+u+"' width='"+w+"' height='"+h+"'>");
return false;
}
//--></script>
</head>
<body>

<form name='f1' onsubmit='return doSubmit()'>
<table>
<tr><td>img Width</td><td><input type='text' name='w' value='75'></td></tr>
<tr><td>img Height</td><td><input type='text' name='h' value='40'></td></tr>
<tr><td>img URL</td><td><input type='text' name='u' size='60' value='flag.gif'></td></tr>
<tr><td colspan='2' align='center'><input type='submit' value='Change Image'></td></tr>
</table>
</form>

<div id='id1' class='clsCBE'>id1</div>

</body>
</html>

Or this one


<html>
<head>
<title>Dynamic Image Resize</title>
<style type='text/css'><!--
.clsCBE {
position:absolute; visibility:hidden;
width:100%; height:100%; clip:rect(0,100%,100%,0);
color:#000000; margin:0px; padding:0px;
}
--></style>
******** type='text/javascript' src='cbe_core.js'> </script>
******** type='text/javascript' src='cbe_clip.js'> </script>
******** type='text/javascript' src='cbe_slide.js'> </script>
******** type='text/javascript' src='cbe_slide2.js'> </script>
******** type='text/javascript' src='cbe_event.js'> </script>
******** type='text/javascript' src='cbe_util.js'> </script>
******** type='text/javascript' src='cbe_debug.js'> </script>

******** type='text/javascript'><!--
var e1,ee,innen;

function windowOnload() {
with (ee = cbeGetElementById('ee').cbe) {
resizeTo(800,300);
moveTo(100,50);
show();
zIndex(2);
}
with (e1 = cbeGetElementById('e1').cbe) {
background('0000FF');
resizeTo(500,500);
moveTo(0,0);
show();
zIndex(20);
}

document.cbe.addEventListener("mousemove", resizeImage);
}

function resizeImage(e){
e1 = cbeGetElementById('e1').cbe
e1.resizeTo(e.pageY,e.pageY);
e1.slideTo(e.pageX,0,4000);


pic1=document.images.myImage1;
pic1.width = e1.width()/4+20;
pic1.height = e1.height()/4+20;
}
//--></script>
</head>

<body marginwidth='0' marginheight='0'>

<div id='ee' class='clsCBE'>
<div id='e1' class='clsCBE'>
<img name="myImage1" src="bus.jpg" width="100" height="100" border="0">
</div>
</div>


</body>
</html>

red.iceman
24-07-2003, 10:33
@pitu: Da steht doch auch bloß, dass es ab Netscape6 bzw IE6 funktioniert. Oder habe ich was überlesen???

@jana: Ups. Ich haett' nicht gedacht, dass das so kompliziert werden kann. Danke.

ri

pitu
24-07-2003, 11:01
Das sollte auch noch dir Antwort zu workarounds etc. sein ;)

gruss,
pitu