zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder bei einer Schräglage: responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.07.2013, 22:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard Bilder bei einer Schräglage: responsive

Hallo Forum,

ich habe einen div #parent, der zwei weitere divs enthält #upper und #lower. Diese enthalten jeweils ein Bild. Zur einfacheren Nachvollziehbarkeit habe ich für jedes dieser Bilder ein extra div erstellt, welches die ungefähren Maße enthält #imgUpper und #imgLower; welche die größen von #upper img und #lower img darstellen.

Ich möchte, dass sich die Bilder responsive verhalten und die schräglage von #upper und #lower auch. Schon lange probiere ich herum und bin auch bei der Webrecherche nicht fündig geworden. Kann mir irgendjemand helfen?

Mein Code:
HTML-Code:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #parent {
                position:fixed;
                bottom: -25%;
                left: -10%;
                width:120%;
                height: 215%;
                transform: rotate(-14deg) translateX(-4%) translateY(30%) skewX(0deg) skewY(0deg);
            } 
            #upper {
                background-color: #000;
                width: 100%;
                height: 50%;
            }
            #lower {
                background-color: #e4e4e4;
                width: 100%;
                height: 50%;
            }
            #upper img {
                position: relative;
                bottom: -52.55%;
                left: 22%;
            }
            #lower img {
                position: relative;
                transform: scale(0.2) rotate(180deg) translateX(-180%) translateY(200.5%);
            }
            #imgUpper {
                width: 695px;
                height: 470px;
            }
            #imgLower {
                width: 256px;
                height: 213px;
            }
        </style>
    </head>
    <body>
        <div id='parent'>
            <div id='upper'>
                <div id="imgUpper" /></div>
                <img src="./team-wrestling.png" />
            </div>
            <div id="lower">
                <div id="imgLower" /></div>
                <img src="./team-style2.png" />
            </div>
        </div>
    </body>
</html>
Ich habe echt keine Ahnung wie ich weitermachen soll. Pleaze help me...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.07.2013, 15:48
Benutzer
neuer user
 
Registriert seit: 07.10.2011
Ort: Berlin
Beiträge: 32
v217.89 befindet sich auf einem aufstrebenden Ast
Standard

hi,

<div id="imgLower" /> => <div id="imgLower">,
<img src="./team-wrestling.png" /> => <img src="./team-wrestling.png" alt="">


Wenn ich dich richtig verstanden habe, möchtest du einfach das es immer gleich aussieht, egal wie groß das Browserfenster ist?!
__________________
PHP-Code:
<?phahap

     
echo 'haha';

?>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.07.2013, 00:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard

Ganz genau. Ist das ohne JavaScript überhaupt zu bewerkstelligen? Wenn ja, wie? Wenn nicht, wäre ich über Hilfe auch sehr froh...
Mit Zitat antworten
Antwort

Stichwörter
responsive design

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 13:37
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 07:21
bilder in div container unten anordnen diegaby CSS 12 17.11.2008 14:08
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:10 Uhr.