Bildausschnitt bestimmen

[Linuchs]

Hallo,

in einem div vorgegebener Größe möchte ich ein größeres Bild so anzeigen, dass es so breit ist wie der div und die vertikale Bildmitte auf der vertikalen Mitte des div liegt.

Doch das Bild "klebt" mit der oberen Kante oben am div.

div {  
  position: relative;  
  overflow-y: hidden;  
  max-height: 200px;  
  vertical-align: bottom; /* funzt nicht */  
  vertical-align: middle; /* funzt nicht */  
}  
div img {  
/*display: block; */  
  width: 100%;  
}  

Das CSS clip habe ich mir angesehen, aber da ich die Größe des Bildes nicht kenne (Webcam), wess ich nicht, wie ich das zuschneiden sollte.

Linuchs

[FrankBonn]

Hi,

was du suchst ist css cover bzw. contain.

Beste Grüße

[Gunnar Bittersmann]

@@FrankBonn:

nuqneH

was du suchst ist css cover bzw. contain.

Nein. Es war weder von Hintergrundbild die Rede noch hast du angedeutet, wie man zwischen beidem umschalten sollte. (Ja, man bräuchte beides.)

Qapla'

[Linuchs]

was du suchst ist css cover bzw. contain.

Das finde ich nur im Zusamenhang mit background-image.

Linuchs

[Gunnar Bittersmann]

@@Linuchs:

nuqneH

in einem div vorgegebener Größe

Was heißt „vorgegeben“?

möchte ich ein größeres Bild so anzeigen, dass es so breit ist wie der div und die vertikale Bildmitte auf der vertikalen Mitte des div liegt.

Mit height statt max-height würde es gehen*:

div  
{  
	height: 20vw;  
	overflow: hidden;  
	display: flex;  
	align-items: center;  
}  
  
div img  
{  
	width: 100%;  
}

s. http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically

Qapla'

* Hinzufügen von -ms- und -webkit-Präfixen überlass ich dir. http://caniuse.com/flexbox

[ralphi]

Hi Linuchs,

soweit ich weiß, fehlt beim

div img{  
position:absolut;  
left:-xx;  
...  
}

Viele Grüße aus LA

[Gunnar Bittersmann]

@@ralphi:

nuqneH

soweit ich weiß, fehlt beim

div img{

position:absolut;
left:-xx;
...
}

  
Nein. Zum einen ist horizontale Zentrierung hier nicht erforderlich, da sich das Bild über die volle Breite erstrecken soll. Horizontale Zentrierung wäre sowieso nicht das Problem.  
  
Zum anderen scheitert die Methode mit der absoluten Positionierung hier daran, dass die Bildgröße nicht bekannt ist.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Auge]

Hallo

soweit ich weiß, fehlt beim

div img{

position:absolut;
left:-xx;
...
}

>   
> Nein. …  
>   
> Zum anderen scheitert die Methode mit der absoluten Positionierung hier daran, dass die Bildgröße nicht bekannt ist.  
  
… und am fehlenden „e“.  
  
\*scnr\*  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

[Linuchs]

habe das jetzt recht umständlich mit Javascript gelöst. Bin aber nicht zufrieden, weil die Methode beim Ändern der Windowsgröße nach dem Laden der Seite versagt.

Aber mit CSS scheint es keine Lösung zu geben.

Falls Javasript ausgechaltet ist, wird nur das Startbild gezeigt, also kein Layout-Problem, da der WEchsel eh nicht stattfindet.

Ich messe erst Breite und Höhe des umschließenden div, dann Breite und Höhe des geladenen Bildes. Daraus errechne ich den negativen Wert für top:

function nxtBild () {  
  // erstes Bild bestimmt die Hoehe  
  if ( bildhoehe == 0 ) {  
    bildhoehe  = document.getElementById("panorama_bild").offsetHeight;  
    bildbreite = document.getElementById("panorama_bild").offsetWidth;  
    document.getElementById("panorama_bild").style.height = bildhoehe + "px";  
//  alert ( "B x H = "+bildbreite+" x "+bildhoehe );  
  }  
  bildzaehler++;  
  if ( typeof arr_panorama[bildzaehler] == "undefined" || arr_panorama[bildzaehler][1] == "" ) bildzaehler = 0;  
  window.clearTimeout( opacity_timer );  // einblenden stoppen  
  document.getElementById( "bild_alt" ).src = document.getElementById( "bild_neu" ).src; // Bild sichern  
  // neues Bild  
  opacity = 0.0;  
  document.getElementById( "bild_neu" ).style.opacity = opacity;  
  // Bild laden  
  var bild = new Image();  
  bild.src = arr_panorama[bildzaehler][1];  
  bild.onload   = function() {  
//  var margin = ( bild.height -200 ) /(-2) +"px";  
    var faktor = bildbreite / bild.width;  // 699 / 768  
    var margin = bild.height *faktor /(-2) +bildhoehe /2 +"px";  
    document.getElementById( "bild_neu" ).style.top = margin;  
    document.getElementById( "bild_alt" ).style.marginTop = margin;  
  }  
  document.getElementById( "bild_neu" ).src = arr_panorama[bildzaehler][1];  
/*  
  if ( bild.height > 200 ) {  
    var margin = '-'+bild.height/2+'px';  
    alert ( margin );  
    document.getElementById( "bild_neu" ).style.top = margin;  
  }  
*/  
  document.getElementById( "panorama_text" ).innerHTML = arr_panorama[bildzaehler][0];  
  nxt_timer = window.setTimeout( "nxtBild ()", 8000 );  
  einblenden();  
}  

Hoffe nur, dass die beiden Zeilen
  var bild = new Image();
  bild.src = arr_panorama[bildzaehler][1];

beim Wiederholen der Bildfolge die Bilder nicht dauernd neu laden.

Linuchs

[Matthias Apsel]

Om nah hoo pez nyeetz, Linuchs!

Aber mit CSS scheint es keine Lösung zu geben.

Gunnars Lösungsvorschlag tut es nicht?

Matthias

[Linuchs]

Gunnars Lösungsvorschlag tut es nicht?

Doch, nach Erweiterung des HTML.

Beide Bilder (das gesicherte und das darüber einzublendende) müssen in je ein eigenes div gepackt werden.

Danke an Gunnar.

Linuchs

[JürgenB]

Hallo Linuchs,

... Bin aber nicht zufrieden, weil die Methode beim Ändern der Windowsgröße nach dem Laden der Seite versagt. ...

du könntest auf das Resize-Event reagieren.

Gruß, Jürgen