• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Hintergrund oder Vordergrundbild verzerrungsfrei und bildfüllend abbilden

S

schlegel.berlin

New member
Liebe Leute,
mal wieder ein kleine (CSS)Nuss zu knacken.... :)

Ich möchte auf einer Startseite ein Foto bildfüllend und verzerrungsfrei abbilden, unabhängig der Monitorauflösung.

Beispiel:

Eine Foto hat das Format 4:3.
Die Abbildung bei einem 4:3 Display(z.B. 1024 x 768) ist also einigermaßen problemlos.
Bei einem 16:9 Monitor (z.B. 1920 x 1080) muss das Bild nun beschnitten werden damit es verzerrungsfrei bleibt.

Die Aufgabenstellung ist nun, das Bild in diesem Fall in der Vertikalen ZENTRIERT zu beschneiden, also oben und unten jeweils gleich viel abzuschneiden (siehe nachstehendes Beispiel (Die s/w-Bildteile der rechten Abbildung sind die abgeschnittenen Bildanteile):

sample.jpg

Ich habe es zwar geschafft, das Bild verzerrungsfrei abzubilden, aber eben so, dass die "überstehende" nur unten abgeschnitten wird (sie unten angefügte Codeschnipsel.

Wie ich das zentriert machen soll, dran beiß ich mir grad heftig die Zähne aus.

Könnt ihr helfen?

LG, Karin

CSS
Code: 
html, body
{
overflow:hidden;

margin: 0em;
padding: 0em;
background: #000;
}



img#bg
{
position: fixed;
top: 0em;
left: 0em;
width: auto;
height: 100%;

}

HMTL (stark vereinfachT)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>beispiel</title>


      <link rel="stylesheet" type="text/css" href="support/start.css" />

</head>
<body id="body">
<a href="#">
<img src="foto.jpg" width="auto" height="1" title="Klicken Sie irgendwo auf das Bild" alt="Klicken Sie irgendwo auf das Bild" id="bg"  border="0" style="cursor:pointer" />
</a>

</body>
</html>
 
Zuletzt bearbeitet:
Heißt abschneiden denn nicht auch, dass das Image an sich geändert werden muss? Kann man mit CSS sagen, dass man es schmaler haben will ohne dass der Browser einen Scrollbalken anzeigt? Ich bin kein CSS Profi aber um zu helfen versuche ich, mitzudenken. Mal schauen, ob uns das weiter bringt :)
 
Hi Julian,

ja, danke für den nützlichen Link.
Ich werde das mal (modifiziert) übernehmen und berichte dann (inkl. Script) über das Ergebnis.
Wird aber einige Tage dauern. Bin erstmal wieder bis wahrscheinlich einschl. Montag weg ...

Auf jeden Fall vielen Dank. Ich schätze, da werde ich jetzt schon weiterkommen:
Nicht nur dabei die Aufgabenstellung zu erfüllen, sondern auch meine Einsichten zu vermehren :)

LG, Karin
PS: Schönes WE
 
Hi mikdoe und j-l-n,

also, konnte heute nur kurz mal an einen PC und hab da was auspobiert, leider ohne Erfolg.

Ich will das Problem nochmal vereinfacht darstellen.
Das unten abgbildete Beispiel hab ich mit folgendem Script erreicht:
HTML: 
<html>
<head>
<style>
img#bg
{
position: fixed;
top: 0em;
left: 0em;
width: 110%;
height: auto;
}
</style>
</head>
<body>

<img src="foto.jpg" width="auto" height="1" id="bg" />

</body>
</html>
foto.jpg hat die Größe 1800 x 1200 Pixel

Mit dem Script bleibt das Bild, unabhängig von der Monitoreinstellung, in der Breite immer erhalten.
Um jetzt bei unterschiedlichen Seitenverhöltnissen des Monitors das Foo NICHT zu verzerren, wird einfach unten am Bild etwas abgeschnitten, bzw, außerhalb des sichtbaren Monitorbereichs verlegt.

Im Vergleich der Monitorauflösungen von 4:3 und 16:9 sieht das Ergebnis dann wie folgt aus.

sample.jpg

Meine Fragestellung ist nun, wie ich es schaffe, das das Foto NICHT NUR unten abgeschnitten wird, sondern zentriert oben UND unten...

Und wie eingangs gesagt, hab ich das mit dem Beiüsile-Link von J-l-n leider nicht hingekriegt.
Hatte allerdings auch nicht vielZeit zum Fummeln heute. Grad mal 'nekanppe halbe Stunde...

Ab Donnerstag bin ich wieder zuhause. Vielleicht hatte ja bis dahin jemand von Euch den richtigen Zündfunken inseinen Synapsen :)

LG, Karin
 
Code: 
html, body
{
overflow:hidden;

margin: 0em;
padding: 0em;
background: #000;
}



img#bg
{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
Warum eigentlich nicht über ein Hintergrundbild?

HTML: 
<!DOCTYPE html>

<html>
<head>
<title>Fenstertitel</title>
<style type="text/css">
body, html {
	margin: 0;
	width: 100%;
	height: 100%;
}
body {
	background-image: url("http://www.wallpaper-area.to/wallpaper/13/323/3D_002.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
- dabei zu beachten: Can I use... Support tables for HTML5, CSS3, etc
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben