Dynamische Anpassung gesucht

[Eisbergsalat]

Hi,
ich habe mehrere Elemente die ich je nach Bildschirmauflösung gerne dynamisch angepasst haben möchte. Bei Hintergrundbildern ist das ganze auch kein Problem. Jedoch habe ich irgendwie ein Problem dieses bei Freigestellten realtiv und absolut positionierten img s anzuwenden.

ich habe zum Beispiel in meinem Ladebildschirm folgenden CSS Code.

#loader {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #efefef;
    opacity: 0.98;
    z-index: 600;
    vertical-align: middle;
}
#loaderInner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
}
#loaderText {
    font-size: 20px;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    width: 300px;
    height: 32px;
    margin-top: 25px;
    margin-left: -100px;
}
#loaderImg {
    position: absolute;
    top: 35.5%;
    right: 0%;
}

Mir geht es hierbei NUR um #loaderImg.
Wie sage ich ihm, dass er, egal welche Auflösung vorliegt, auf die Auflösung gemessen, 30% des Platzes unten rechts einnehmen soll (egal in welcher Auflösung, dynamisch halt).
Wenn ich width angebe bezieht sich das auf das Bild an sich. Genau wie bei max- oder min-width. Ich versteh nicht wie das funktioniert? Ich hab schon viel gesucht in diversen Foren, aber nichts gefunden was mir geholfen hat.

Achja, in HTML sieht das bei so aus:

<div id="loader">
        <div id="loaderInner">
            <div id="loaderText">
            <br>Bitte warten ... Wolf kommt gleich !
            </div>
        </div>
        <div id="loaderImg">
            <img src="images/portrait2.png" alt="" />
        </div>
    </div>

Wär cool wenn hier jemand helfen könnte. Danke

 

[Eisbergsalat]

Ich hab das jetzt so gelöst:

#loadscreen {
    position: absolute;
    width: 25%;
    right: 0;
    bottom: -1%;
}
#loadscreen .profil {
    width: 100%;
}

        <div id="loadscreen">
            <img src="images/portrait2.png" alt="" class="profil" />
        </div>

Aber wie funktioniert das bei Textblöcken die sich in containern befinden?

 

[nookie]

Suche mal nach Bootstrap und Media Queries. Das sollte dir bei deinen Problemen helfen.

 

[Eisbergsalat]

Danke. Habe aber endlich das gefunden was ich gesucht habe. Eine Eineit die sich Viewports nennt.
Damit realisiere ich besser und leichter als gedacht was sich mir als großes Problem darstellte.
http://www.drweb.de/magazin/neue-css-einheiten-fuer-responsive-designs-47490/