Versuche dies:
HTML
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Test</title>
- <style>
- body {
- height: 100vh;
- margin: 0;
- display: flex;
- flex-direction: column;
- }
- #wrapper {
- margin-top: auto;
- text-align: center;
- position: relative;
- }
- #outerimg {
- height: auto;
- width: 40%;
- max-width: 400px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- #centerimg {
- height: auto;
- width: 10%;
- max-width: 100px;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <img id="centerimg" src="images/klein.svg">
- <img id="outerimg" src="images/gross.svg">
- </div>
- </body>
- </html>
In horizontaler Richtung ändern sich die Kreise mit der Breite des Browserfensters.