Linuchs: Bildausschnitt bestimmen

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

  1. Hi,

    was du suchst ist css cover bzw. contain.

    Beste Grüße

    1. @@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'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. was du suchst ist css cover bzw. contain.

      Das finde ich nur im Zusamenhang mit background-image.

      Linuchs

  2. @@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

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

    soweit ich weiß, fehlt beim

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

    Viele Grüße aus LA

    --
    ralphi
    1. @@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)
      
      1. 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/)
        
  4. 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

    1. Om nah hoo pez nyeetz, Linuchs!

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

      Gunnars Lösungsvorschlag tut es nicht?

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Barke und Barkeeper.

      1. 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

    2. 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