nicht angemeldet
div als quadrat mit höhe 100%
0 
Camping_RIDER
0 0 
Gunnar Bittersmann
0
div als quadrat mit höhe 100%
allo und einen schönen guten abend an alle,
wie im betreff schon geschrieben, möchte ich gern ein div als quadrat mit höhe 100% haben. allerdings geht es dann weiter, dieses quadrat soll runde ecken bekommen, also ein kreis werden. für normale pc's, laptops etc. besteht die lösung darin, die breite als 100vh anzugeben und border-radius halt als 50vh. leider wird dies von smartphones aller art nicht erkannt (siehe dazu auch can i use). hat jemand ne andere idee, wie man so einen stets in der mitte des viewports befindlichen kreises mit css (oder bild, hintergrundbild) hinbekommt? bzw. wie man das für smartphones umsetzen kann?
beispiel: zentrierter kreis
vielen dank trunx
--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
-
Aloha ;)
[...] die breite als 100vh anzugeben und border-radius halt als 50vh. leider wird dies von smartphones aller art nicht erkannt (siehe dazu auch can i use).
Hmm, ich weiß nicht, wo du diese Info her hast? Zumindest liest sich die verlinkte caniuse-Seite so, dass es entgegen deiner Aussage unterstützt wird. Keinen Support bietet so wie ich das sehe nur Opera Mini - und Opera Mini ≠ Opera Mobile; ich glaube kaum, dass Opera Mini heute noch dermaßen verbreitet ist?
Ich verstehe also das Problem irgendwie nicht ganz - vielleicht kann ich auch einfach nicht lesen ;)
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
hallo rider, danke für deine antwort. jaja das lesen :D, was ich meine steht im kleingedruckten ...
wie du schon sagst, grundsätzlich werden diese einheiten unterstützt, aber im einzelfall, hier zb. border-radius eben nicht, deshalb sind die farben da auch nicht ganz grün, sondern zeigen halt die teilweise unterstützung an. in diesen fällen ist die eigene anschauung dann wichtig, sprich, einfach smartphone deiner wahl anwerfen und nachschauen. und da wie gesagt, zeigt sich dann das übel. trdm danke :)
ich werde wohl ein bild nehmen und das mit 100vh x 100vh skalieren, ist zwar nicht so sauber, aber es funktioniert.Aloha ;)
[...] die breite als 100vh anzugeben und border-radius halt als 50vh. leider wird dies von smartphones aller art nicht erkannt (siehe dazu auch can i use).
Hmm, ich weiß nicht, wo du diese Info her hast? Zumindest liest sich die verlinkte caniuse-Seite so, dass es entgegen deiner Aussage unterstützt wird. Keinen Support bietet so wie ich das sehe nur Opera Mini - und Opera Mini ≠ Opera Mobile; ich glaube kaum, dass Opera Mini heute noch dermaßen verbreitet ist?
Ich verstehe also das Problem irgendwie nicht ganz - vielleicht kann ich auch einfach nicht lesen ;)
Grüße,
RIDER
--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.-
@@trunx:
nuqneH
ich werde wohl ein bild nehmen
Wenn du mit „Bild“ SVG meinst, ist auch das machbar. Pixelgrafik – nein.
und das mit 100vh x 100vh skalieren
Du willst abschneiden?
ist zwar nicht so sauber
Und unnötig groß.
„Nicht so sauber“ wäre auch ein Grund, der gegen radial-gradient spricht (kein Anti-Aliasing).
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
Hi,
wie im betreff schon geschrieben, möchte ich gern ein div als quadrat mit höhe 100% haben. allerdings geht es dann weiter, dieses quadrat soll runde ecken bekommen, also ein kreis werden. für normale pc's, laptops etc. besteht die lösung darin, die breite als 100vh anzugeben
Für Browser, die das nicht unterstützen, solltest du genug andere Ansätze finden – ist ja kein neues Thema.
und border-radius halt als 50vh.
Dafür nimmst du dann einfach 50%.
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/ -
@@trunx:
nuqneH
wie im betreff schon geschrieben, möchte ich gern ein div als quadrat mit höhe 100% haben.
Auch wenn die Höhe des Viewports größer ist als dessen Breite? Oder möchtest du vielleicht, dass das Quadrat auch dann vollständig zu sehen ist, also eine Größe von 100vmin hat?
border-radius halt als 50vh.
Halt nicht, sondern 50% (wie auch ChrisB schon sagte).
Wobei’s da zugeht wie beim Fleischer: „Darf’s auch etwas mehr sein?“ „Ja, gerne.“ Das Resultat ist auch bei Prozentwerten über 50% dasselbe.
Prozentwerte sind generell sinnvoll, damit man einen single point of change hat, d.h. bei Änderung der Größe des Elements nicht nochmal border-radius anfassen muss.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Hallo,
hat jemand ne andere idee, wie man so einen stets in der mitte des viewports befindlichen kreises mit css (oder bild, hintergrundbild) hinbekommt? bzw. wie man das für smartphones umsetzen kann?
Um einen Block-Container (egal ob div, main, header, footer, article, aside, section) quadratisch oder als Kreis mit voller Fensterhöhe oder -breite (je nachdem was enger ist) zentriert anzuzeigen würde ich das Flexbox-Modell benutzen.
Dabei ist dann vollkommen egal welches Gerät benutzt wird und es sind keine Tricks erforderlich, sondern nur einige wenige Standard-CSS-Angaben.
Gruss
MrMurphy