HTML oder CSS Zoom eines Bildes verhindern

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
derwendtde
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
30.04.2011, 14:23

Es ist fast nicht möglich, alle Zoom-Eventualitäten abzufangen, das kann sich jeder Nutzer ja selbst in den Browser-Optionen einstellen. In Safari ist zB Standard, dass nur der Text gezoomt wird (wenigstens hab ich's mal so eingestellt). IE und FF machen beim Zoom ganz andere Sachen, obwohl sie z. T. alles miteinander vergrößern.

Deshalb würde ich gar nicht versuchen, Zoom zu deaktivieren. Ich glaube vielmehr, dass Dein CSS-Problem woanders liegt: Schau mal, ob die Box (div, article, aside etc), in der das Bild sitzt, eine fixe Breite hat also wahrscheinlich in px.

Jeder Browser weiß, dass Bilder immer widht und height Formate haben. Deshalb werden die auch allermeist mitvergrößert. Das klappt eben nur wenn sich auch die umgebende Box anpassen kann.

Wenn also Dein Spalten-Layout – was die Breiten angeht – in em  -Maßen umsetzbar ist oder in %-Angaben, dürfte das Problem gelöst sein. Beispiel (_ statt Code-Klammer auf):

_div id=container>

  _div id=bilderbox>

    _img src="bild.jpg" height="30em" width="40em"/>

  _/div>

  _div id=textbox>

    _p>Blah…

  _/div>

_div style="clear:left;"> _/div>

_/div

Das o.g. div mit dem clear ist "just Demo", es gibt elegantere Lösungen.

CSS-Beispiel mit em-Maßeinheit:

body {font-size:62.5%;} /* setzt 1em auf gleiches Maß wie 10px, leichter zu rechnen*/

p {font-size:1.4em; line-height:1.8em; }

div#container {width: 90.4em; /* ziemlich genau 900 px, mit 4px Puffer, s.u. */

margin:0 auto; /*zentriert die Box auf Bidschirmen > 900er Auflösung*/

}

div#bilderbox {width:40.2em; /*so passt das Bild bestimmt*/

float:left;}

div#textbox {width:50em;}
MEGACHELTERRAR
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
30.04.2011, 19:23

Man kann nicht auf die Anzeige des Browsers Einfluss nehmen
Educator
30.04.2011, 11:44 

background: color image repeat attachment position;

background: color imgae repeat attachment position 
Lorenz21 
Beitragsersteller
 30.04.2011, 11:53

Mach mal bitte ein Beispiel und schreib wo ich das hinschreiben muss

0