|
|||
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> |
Sponsored Links |
|
|||
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:
|
Sponsored Links |
Stichwörter |
responsive design |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Kundeninteresse an Responsive Layout | heiko_rs | Offtopic | 18 | 24.05.2013 14:37 |
Hintergrund wird nicht angezeigt | maxx | CSS | 6 | 14.10.2012 19:27 |
Hilfe!!! mein Homepagelayout funktioniert nicht! | maxx | CSS | 5 | 14.10.2012 08:21 |
bilder in div container unten anordnen | diegaby | CSS | 12 | 17.11.2008 15:08 |
Bildergalerie mit Variablen | fledermaus | Serveradministration und serverseitige Scripte | 1 | 08.04.2008 09:57 |