Heim > Artikel > Web-Frontend > Wie kann ich die Größe eines Bildes ändern, damit es ohne Verzerrung in das Browserfenster passt?

Wie kann ich die Größe eines Bildes ändern, damit es ohne Verzerrung in das Browserfenster passt?

Barbara StreisandOriginal: 2024-11-01 15:51:55976Durchsuche

How Can I Resize an Image to Fit the Browser Window Without Distortion?

Die Größe eines Bildes so ändern, dass es ohne Verzerrung in das Browserfenster passt

Die Größe eines Bildes so zu ändern, dass es in ein Browserfenster passt, ist eine häufige Aufgabe mit scheinbar einfachen Lösungen. Allerdings kann die Einhaltung spezifischer Anforderungen, wie die Wahrung von Proportionen und die Vermeidung von Beschnitten, eine Herausforderung darstellen.

Lösung ohne Bildlaufleisten und Javascript (nur CSS)

<code class="html"><html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .imgbox {
      display: grid;
      height: 100%;
    }
    .center-fit {
      max-width: 100%;
      max-height: 100vh; /* vh ensures height matches browser window */
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="imgbox">
    <img class="center-fit" src='pic.png'>
  </div>
</body>
</html></code>

Dies Die Lösung verwendet CSS Grid, um sicherzustellen, dass der Bildcontainer die gesamte Fensterhöhe einnimmt. Das Bild wird dann so eingestellt, dass es horizontal und vertikal in diesen Container passt, wobei sein Seitenverhältnis erhalten bleibt und das Hinzufügen von Bildlaufleisten vermieden wird.

Lösung mit JQuery

Wenn Javascript verfügbar ist , ein anderer Ansatz ist:

<code class="html"><html>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  function set_body_height() {
    $('body').height($(window).height());
  }
  $(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
  });
</script>

</body>
</html></code>

Hier wird die Körperhöhe so eingestellt, dass sie mit der Fensterhöhe übereinstimmt, um sicherzustellen, dass die Eigenschaft „max-height“ im Bild korrekt funktioniert. Das Fenstergrößenänderungsereignis wird auch verarbeitet, um die Körperhöhe und die Bildgröße automatisch anzupassen, wenn die Fenstergröße geändert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Bildes ändern, damit es ohne Verzerrung in das Browserfenster passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css Property Event this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie lässt man Text mit jQuery blinken?Nächster Artikel：Wie lässt man Text mit jQuery blinken?

In Verbindung stehende Artikel

Mehr sehen