Quadrat mit Prozentangaben für Länge und Breite

[iandarfdas]

Moin Moin,
wie wahrscheinlich viele bin ich momentan dabei eine Website zu erstellen.
In dieser befinden sich 6 DIV´s wo später Bilder eingefügt werden, somit haben diese die Form eines Rechtecks.
Zu dem habe ich ein Bild in Kreisform (seperates DIV).
Ich möchte die Website auch auf Mobiltelefonen und jegliche andere Größe gut aussehen lassen, dafür benötige ich
Prozentangaben bei der Höhe und Breite der DIV´s (sowohl Quadrate als auch der Kreis).
Wie kann ich dieses Problem lösen? Wenn ich width und height denselben Prozentwert zuordne, dann kommt nur Grütze.
Hat jemand einen anderen Tipp wie ich die Website "monitor-freundlich" aufbauen kann?
Danke schonmal. :)

Hier ein bisschen Code:

Der Kreis (Profilbild):

.profilbild{
                border-radius: 200px;
                height: 250px;
                width: 250px;
                border: 2px solid black;
                margin-left: 8%;
                margin-top: 5%;
            }

Quadrate (Karten):

.karte1{
                background-color: transparent;
                width: 300px;
                height: 300px;
                border: 1px solid grey;
                float: left;
                margin-left: 8%;
                margin-right: 13%;
                box-shadow: 10px 10px 10px grey;
            }

 

[basti1012]

Ein responsives Viereck oder Kreis würde ich erstmal mit VW machen. Mit Prozenten geht das ja eigentlich nur wenn der Hauptcontainer auch Rechteckig ist.
Man müsste mal die komplette Seite sehen, wie man das an besten machen kann.
Also mit VW Angaben würde ich es erstmal so machen

Quadrat mit Prozentangaben für Länge und Breite

Quadrat mit Prozentangaben für Länge und Breite Moin Moin, wie wahrscheinlich viele bin ich momentan dabei eine Website zu erstellen. In dieser befinden sich 6 DIV´s wo später Bilder eingefügt werden, somit haben diese die Form eines Rechtecks. Zudem habe ich ein Bild in Kreisform (separates...

basti1012.bplaced.net

 

[MrMurphy]

@iandarfdas

Dein Ansatz ist komplett falsch, damit kannst du keine responsiven Seiten erstellen.

Der Grundsatz ist, dass Bilder mit einem Grafikprogramm zurechtgeschnitten und in ihrer Größe (maximale Darstellung) angepasst werden.

HTML und CSS sind nicht dafür da, um solche Aufgaben zu erledigen. Das können die nur aus längst vergangenen Zeiten rudimentär. Grade beim responsiven Design hat sich das aber als Irrweg erwiesen.

Dann sind kaum Anpassungen mit CSS erforderlich, den Rest machen die Browser.

 

[Sailor]

Dem Browser ein Korsett anzulegen, wie man es mit absoluten Größenangaben in Pixeln usw. macht, ist (fast) nie eine gute Idee und es ist in keinem Fall responsiv.
In deinem Fall würde ich folgendes versuchen... sag dem Browser er soll das Bild immer so groß darstellen, wie es geht - aber nicht größer als ...px!

height: 100%; /*so groß wie es geht innerhalb des Elternelementes*/
max-height: 250px; /*nicht größer als 250px... oder welchen Wert du haben willst*/

Und für das runde Bild solltest du ...

border-radius: 50%;

notieren.
Die Angabe einer Breite (width) lässt du im CSS weg, das berechnet der Browser von alleine.
Geht natürlich auch anders herum... also die Width angeben und die Height weglassen.
Und natürlich... wie @MrMurphy schon angeregt hat, die Bilder vorher auf die maximal zu erwartende Anzeigegröße dimensionieren.

 

[Tronjer]

Für responsive Images ein <picture> Tag im HTML anlegen, das die Source je nach Viewport lädt. Im CSS die width festlegen und height auf auto stellen. Eventuell auch object-fit zur Anpassung an die Box. Zur Darstellung auf unterschiedlich großen Viewports bietet sich außerdem die Verwendung eines Grid-Layouts an.