HTML: Bildgröße an Monitorrgröße anpassen

Diskutiere HTML: Bildgröße an Monitorrgröße anpassen im HTML Forum im Bereich Programmierung; Hallo, meine Seite besteht aus der Hintergrundfarbe und einem Bild: <div style="position: absolute; width: 100px; height: 100px; z-index: 1...
  • HTML: Bildgröße an Monitorrgröße anpassen Beitrag #1
J
jenny
New member
Beiträge
1
Punkte Reaktionen
0
Hallo, meine Seite besteht aus der Hintergrundfarbe und einem Bild:

<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 435px; top: 40px" id="Ebene1">
<img border="0" src="bild.jpg" width="700" height="600"></div>

dann sind noch 4 Buttons darauf abgebildet.

Auf meinem Laptop sieht die Seite aus wie sie soll: das Bild wird mittig auf dem Monitor angezeigt und man es kann nicht seitwärts oder hoch/runter scrollen. Auf einem anderen Monitor wird es allerdings größer angezeigt und man muss hin und her scrollen, um es sich anzusehen.

Gibt es irgendeine Möglichkeit, das Bild immer auf der gleichen Position auf dem Monitor anzuzeigen, mit jedem Browser, oder zumindest das Bild immer komplett anzuzeigen? Mit align="center" hab ich's schon versucht, aber dann wird das Bild trotzdem zu groß dargestellt, und ich weiß ja auch nicht, wie es auf noch anderen Monitoren aussieht. Das Bild soll sich aber nicht an die Fenstergröße anpassen, weil da Tiere drauf sind die dann verzogen würden.

... bin neu... ;)
 
  • HTML: Bildgröße an Monitorrgröße anpassen Beitrag #2
W
Webdesigner
Active member
Beiträge
35
Punkte Reaktionen
0
Mit deinem obigen Code packst Du ein 700-Pixel-breites Bild in einen 100-Pixel-breiten Container, aber das hat jetzt nichts mit der Positionierung zu tun.

Du positionierst das Bild bisher (egal wie groß der Monitor ist) 435 Pixel vom linken Seitenrand entfernt auf die Seite. Damit ist es nur mittig, wenn der Bildschirm 435*2+700 Pixel = 1570 Pixel breit ist.

Probiere es mal so - vorausgesetzt das Bild ist wirklich 700 Pixel breit:

<style type="text/css" media="all">
#bild { position:relative; left:0px; top:40px; z-index:1; width:700px; margin-left:auto; margin-right:auto; }

</style>

</head>

<body>
<div id="bild">
<img border="0" src="bild.jpg" width="700" height="600">
</div>
 
Thema:

HTML: Bildgröße an Monitorrgröße anpassen

Oben Unten