HTML oder CSS Zoom eines Bildes verhindern

Hallo!

Ist es in HTML oder CSS möglich den Zoom eines Bildes zu verhindern? Und wenn ja, wie?

Ich habe auf meiner Seite links ein Bild eingefügtund in der Mitte stehtn der Text. wenn man auf das Bild klickt, kommt man zur Startseite. Wenn ich jetzt aber zoome, wird das Bild mitgezoomt und schiebt sich zum Teil in den Text!!

Kann ich bei diesem Bild den Zoom blockieren?? Wie geht das?? Wenn das nicht geht, wie kann ich dann mein Problem beheben???

Danke!

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

Ähnliche Beiträge

Overflow verhindern HTML,CSS,js?

...zum Beitrag

CSS Eigenschaften mit Button verändern?

Hallo,

ist es irgendwie möglich durch einen Button (also wenn man drauf klickt) in HTML CSS Eigenschaften von anderen Objekten zu verändern?

...zum Beitrag

Wasserzeichen CSS HTML?

Hallo,

Ich würde gerne in HTML und CSS ein wasserzeichen machen, wie geht das?

Das Wasserzeichen soll im hintergrund von einem Text sein, falls ihr versteht was ich meine.

...zum Beitrag

Ecosia Suchleiste in Website einbinden?

Würde mir eine persönliche Startseite in HTML/CSS machen und würde da gerne eine Suchleiste einbauen, sodass die Suchergebnisse von Ecosia kommen.

Wenn ihr mir eine HTML/CSS-Vorlage geben könntet, das wäre perfekt, hab dazu leider nichts gefunden.

...zum Beitrag

Text auf Bild in HTML einfügen?

Ich möchte in HTML oder auch CSS, dass es so aussieht:

Wie man erkennen kann Ein Bild mit einem Text drauf

...zum Beitrag

HTML & CSS Layout verschiebt sich durch zoomen?

Guten Tag, mein Layout verschiebt sich wenn ich rein- oder rauszoome oder in den Vollbildmodus gehe. Hat jemand eine Lösung?

Meine HTML: https://pastebin.com/uTGyAncL

Meine CSS: https://pastebin.com/jCiQ84dk

Video zum Problem:

https://www.youtube.com/watch?v=ZuzGNM1iJkg

...zum Beitrag

CSS Text Mittig aber linksbündig?

Hey, ich möchte in CSS einen Text in der Mitte haben aber auch linksbündig. (Die Anfänge sollten auf der roten Linie sein.)

...zum Beitrag

Icon/Logo in obere Zeile bekommen HTML und CSS?

Hey! Ich habe einmal eine Frage, unzwar wie ich das Instagram Logo (Bilder angehangen), in die obere Leiste zu den Punkten wie z.B Über mich, Startseite und Kontakt u.s.w bekomme. HTML und CSS Script ist auch mit angehangen.

...zum Beitrag

Text unsichtbar html css?

Hi, ich prgrammiere eine website in html und css.

ich habe einen container und eine box erstellt und will dass man nur das hintergundbilt und ein text sieht sieht und wenn man drauf geht mit :hover dass dann ein andere text erscheint. wäre dass möglich?

...zum Beitrag

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zum Beitrag

HTML/CSS Text über Bild center blur?

Ich möchte in eine Tabelle eine Bild einfügen. Über das Bild soll gehovered werden, um es einen blur zu geben.

Beim Hovern soll in der Mitte des Bildes ein Text erscheinen, der sich immer in der Mitte des Bildes befindet, unabhängig davon wie groß das Fenster ist.

Vielen Dank

...zum Beitrag

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zum Beitrag

Html Tabelle In die mitte?

Weiß jemand Wie ich in html(css) eine Tabelle in die Mitte Tun kann

Danke im voraus

...zum Beitrag

html css links und rechts gif/bild und in der mitte text?

ich mache gerade eine seite kenne mich noch nicht soo gut aus und wollte fragen wie man links und rechts ein gif oder bild machen kann und in der mitte einen text mache den text mit <center></center> in die mitte deswegen kann ich den gift oder das bild nicht daneben sonder nur darunter machen, kann mir jemand helfen?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen