Größe eines Elements ändern mit CSS?

Hallo,

ich möchte ein Element mit CSS so einstellen, dass es größer wird, wenn man das Browserfenster kleiner macht. Irgendwelche Tipps?

Es gibt ja vh und vw, aber da wird das Element kleiner, wenn man das Browserfenster kleiner macht. Und ich will das Gegenteil.

Danke für die Hilfe.

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

25.04.2024, 15:06

Hi masterbrain0931,

das was du gerne haben möchtest realisierst du mit JavaScript. HTML-Elemente größer zu machen während man das Fenster kleiner wird, kann man nur mit erstellen.

Wenn du aber Breakpoints meinst, sprich eine kleinere Viewport-Größe angibst, dann solltest und kannst du CSS-MediaQueries verwenden. Ein MediaQuery legt unter anderem fest was passieren soll wenn eine bestimmte Vieport-Größe erreicht wurde.

Informationen über Media Queries findest du unter:

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Viel Erfolg masterbrain0931!

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Xandros0506

24.04.2024, 18:22

dann nutze eben Media-Queries und definiere für kleiner Displayauflösungen deine CSS-Eigenschaften für das Element eben passend.

Ähnliche Fragen

html seite soll auf eine größe bleiben?

Hallo,

ich habe bei meiner Website die beiden folgenden Probleme.

Also erstmal bin ich noch Anfänger und gerade dabei meine Website ordentlich aufzubauen und zu strukturieren, also bitte keine bösen Wörter, falls die Antworten zu offensichtlich sind :)

Wenn ich das Window kleiner mache verschiebt sich alles usw. und sieht nicht mehr schön aus, da die Seite ja auf meiner Bildschrimgröße angepasst ist. Gibt es eine Möglichkeit, dass die Seite immer perfekt für die dementsprechende Monitor Größe geeignet ist, ohne das sich beim vergrößern oder verkleinern alles verschiebt?
Das zweite Problem basiert auf dem ersten. Wenn ich das ganze dann auf dem Handy öffnen möchte, ist wirklich alles verschoben... Gibt es da etwas was ich machen kann? Ich weiß das man mit @media screen{} einstellen kann, dass z.B. ein Bild ab einer bestimmten Pixel-Anzahl größer bzw. kleiner werden soll... Jedoch weiß ich ja nicht die Pixelgrößen von jedem Handy? Gibt es da eine einfachere alternative?

Hoffe mir kann da jemand helfen, ansonsten auch gerne per Privat Nachricht

Danke im Voraus

Fabian

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

<textarea> dynamisch an die Länge des Textes anpassen, ohne Scrollbar und ohne Javascript?

Hallo,

ich möchte die Größe meines textarea der Länge des Textes anpassen. Sprich, ich habe eine orvgegebene Größe und wenn der Text länger wird, wird das Feld automatisch um eine Zeile größer. Da es für die Uni ist, darf ich kein Javascript benutzen, sondern nur HTML, CSS und PHP.

Vielen Dank schonmal!

...zur Frage

Bestes Webhosting?

Ich will Webseiten verkaufen bzw. für meine Kunden verwalten. Welches ist der beste Anbieter dafür. Die Webseiten sind alle einfach und brauchen nicht so viel Speicher.

...zur Frage

Programmierung herkömmlich HTML versus CMS?

Früher habe ich Websites mit Dreamweaver gemacht, sprich mit HTML und ensprechender Datenbank-Anbindung. Heute kann man ja auf verschiedene Frameworks und Content Management Systeme zurückgreifen.

Welche Gründe sprechend heute dagegen es wie früher händisch zu machen?

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

Html, Css, Javascript Search "Bar"(?) machen?

Ich würde gerne auf meiner Website einen Bereich haben wo ich ein Wort eintippen kann und mir dann Sätze usw. aufgelistet werden.

Beispiel: Ich gebe "Hund" ein und es wird auf der ganzen Seite nach dem Wort Hund gesucht und alles auf einer Seite aufgelistet.

Wie kann ich sowas machen? Bin Anfänger was das alles angeht...😅

...zur Frage

Tabulator mit Elementor?

Hallo Zusammen

Wie kann ich im Elementor einen Tabulator Abstand machen, so wie im Word?

L.g.

...zur Frage

Search Bar mir HTML, CSS; Java?

Wie kann ich eine Search Bar mit HTML, CSS und Java Code machen? Ich möchte, dass wenn man was eingibt, eine neue Seite geöffnet wird und auf dieser dann die Suchergebnisse angezeigt werden.

...zur Frage

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zur Frage

Code Pen für PHP?

Hallo,

ich suche einen Ersatz für Code Pen auf den ich auch PHP Projekte präsentieren kann und man auch den Code sehen kann. Würde gerne die Vorschau in meine Website einbauen.

Habe Replit probiert, war damit nicht zufrieden.

Danke im vorraus

...zur Frage

Plausibilitätsprüfung als jQuery Code?

Benötige für eine Ausgabe eine Plausibilitätsprüfung als jQuery Code um ein Alter zu überprüfen, bzw. einzutippen: Unter Geburtsdatum tippen man das Datum ein, und bei Jahr_Einrichtung soll man ein Alter (Zahl) eintippen, die zum Datum übereinstimmt.

Das heißt, wenn man ein Datum 23.06.2020 eintippt, kann man nur Zahlen von 1 bis 3 eintippen, ansonsten kommt es zu eine Fehlermeldung

<label for="Geburtsdatum"style="width:165px;">Geburtsdatum</label>
<input type="text" class="form-control" style="width: 129px;" style="max-width: 130px;" id="Geburtsdatum" name="Geburtsdatum" value="{if $pdf}{$values.Geburtsdatum}{/if}">
                                                    
                                                              
<label for="Jahr_Einrichtung" style="width: 120px;">Das Kind besucht seit</label>
input type="text" class="form-control" maxlength="2" style="width: 30px;"  name="Jahr_Einrichtung" value="{if $pdf}{$values.Jahr_Einrichtung}{/if}">

...zur Frage

Gehen CSS-Animationen auch rückwärts nach Hover?

Hallo!

Ich habe eine CSS-Animation, die bei Hover ein Element vergrößert. Wenn man die Maus wegbewegt ändert sich die Größe direkt ohne Animation wieder zurück. Wie kann man die Animation beim Webbewegen des Cursers wieder rückgängig abspielen lassen?

...zur Frage

Timer auf Webseite (HTML)?

Wie kann ich in JTML einen Versteckten Tiger stellen, so dass einige Texte erst nach Ablauf des Timers (z.B. 10 sek.) Auftauchen. Der endbenutzer soll davon nichts sehen!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen