Bilder ausrichten und skalieren

Question

Ich benötige Hilfe bei diesem Code auf meiner W3Schools-Website. Ich möchte alle Elemente in der Mitte der Seite behalten. Wenn ich jedoch zentriere, zielt die Linse der Funktion auf die alte Position des Bildes.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom

Ich habe den Code geändert, kann ihn aber nicht verstehen

Wenn das Bild zentriert ist, befindet sich das Objektiv außerhalb des Bildes. So war ihr vorheriger Beitrag

Bildmitte, Objektivposition ist falsch

Gelöst!!!

Um diese Situation zu lösen, erstellen Sie eine div class="main", die alle Elemente enthält. Im CSS-Code haben wir die Einstellungen verwendet, die uns unsere Freundin Samar gegeben hat. Danke, Samar.

Bild gelöst!

Answer 1

那么，据我了解，您希望图像和缩放结果保持原样，但在页面中居中？

如果是这样，您需要在 css 中使用 flexbox，如下所示：

.img-zoom-container {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
}