Wie kann ich die Größe eines Bildes ändern, damit es ohne Verzerrung in das Browserfenster passt?-CSS-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-11-01 15:51:55

Original

990 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!