| Autor |
Nachricht |
Bijou
Threadersteller
Dabei seit: 26.01.2011
Ort: -
Alter: 33
Geschlecht: 
|
Verfasst Di 21.01.2014 20:29
Titel DIV Proportional skalieren, bzw. Größe von IMG annehmen |
  |
|
Guten Abend zusammen,
ich suche nun schon eine Weile und so recht finde ich keine Lösung für mein Problem. Vielleicht könnt ihr mir helfen. Und zwar möchte ich grundsätzlich etwas ähnliches wie hier erzeugen. Also eine Bildergalerie, die sich abhängig vom Seitenverhältnis anpasst. So weit, so gut. Die Darstellung der Bilder und ihre proportionale Skalierung ist kein Problem und den Hover-Effekt der Bilder bekomme ich unabhängig davon auch hin. Da bin ich so vorgegangen, dass ich hinter das Bild eine farbige Fläche + Text platziert habe und bei hover blendet sich das Bild aus und Farbfläche + Text sind zu sehen. Schön und gut.
Das Problem ist, dass es nicht mehr klappt, sobald ich statt Pixelwerten Prozente nehme. Das Bild skaliert sich mit Hilfe von width:33% zwar weiterhin proportional, aber auf die Farbfläche trifft das nicht zu, weil sie sich ja nicht an den Maßen eines vorhandenen Bildes orientieren kann, sondern an dem darin befindlichen Text Inhalt.
hier mit px-Angaben
| Zitat: | <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
</head>
<style>
#hinten{
position:absolute;
width:200px; height:200px;
background-color:rgb(20,110,120);
text-align:center;
z-index:1;
}
#vorne{
position:absolute;
width:200px; height:200px;
z-index:2;
transition: opacity 0.2s;
}
#vorne:hover {
opacity: 0.0;
}
</style>
<a href="#">
<img id="vorne" src="../Documents/Projekte/2014_Portfolio/html 2/img/fluegler-und-kriecher-01.png">
<div id="hinten"><h1 id>test</h1></div>
</a>
<body>
</body>
</html>
|
hier mit %-Angaben
| Zitat: | <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
</head>
<style>
#hinten{
position:absolute;
width:33%;
background-color:rgb(20,110,120);
text-align:center;
z-index:3;
}
#vorne{
position:absolute;
width:33%;
z-index:2;
transition: opacity 0.2s;
}
#vorne:hover {
opacity: 0.0;
}
</style>
<a href="#">
<img id="vorne" src="../Documents/Projekte/2014_Portfolio/html 2/img/fluegler-und-kriecher-01.png">
<div id="hinten"><h1 id>test</h1></div>
</a>
<body>
</body>
</html> |
Ich hoffe ihr versteht, was ich meine. Gibt es eine Lösung? Möglichst ohne JS, denn damit habe ich noch gar keine Erfahrungen gemacht. Falls es nicht anders geht, muss ich da eben durch.
|
|
| |
   |
 |
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: 
|
Verfasst Di 21.01.2014 21:20
Titel
|
|
|
Machs doch einfach (mehr oder weniger) genau wie in deinem Beispiel: http://jsfiddle.net/tDLYJ/5/
// Edit: Typo im Fiddle
Zuletzt bearbeitet von Morgo am Di 21.01.2014 21:22, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Bijou
Threadersteller
Dabei seit: 26.01.2011
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Di 21.01.2014 21:26
Titel
|
|
|
Ja, WOW! Danke!
Das sieht gut aus. Probiere ich jetzt sofort aus.
Zuletzt bearbeitet von Bijou am Di 21.01.2014 21:33, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Bijou
Threadersteller
Dabei seit: 26.01.2011
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Di 21.01.2014 22:07
Titel
|
|
|
Also, klappt ausgezeichnet 
jetzt gibt es allerdings ein neues Problem. Und zwar würde ich nun den Text innerhalb der Farbfläche mittig ausrichten. Ist das auch möglich? Zum Beispiel über Vertical-Align?
|
|
| |
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Di 21.01.2014 22:36
Titel
|
|
|
vertical-align positioniert nur inline-Elemente innerhalb einer Zeile, bezogen auf ein inline-Elternelement (oder Tabellenzelle).
Du kannst dir mal diesen Artikel ganz (im Sinne von: bis zum Ende) durchlesen, inklusive der genannten anderen Techniken zum vertikalen positionieren und deren Vor- und Nachteilen. Dann kannst du dir eine aussuchen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Bild skalieren, Höhe vorgegeben, Breite proportional
Script welches Bilder in der Größe skalieren kann?
[APP Design] Idee für skalieren von Mustern auf Retina größe
Safari Mac Browserfenster feste größe skalieren verhindern
Größe eines SWF´s auf Div-Größe beschränken
Fotowinkel proportional ändern
|
|
Willkommen auf dem Portal für Mediengestalter
