Ernte-zentriertes Bild im inneren div

Ich habe ein div mit einem Bild (img-element), die sich für 100% Breite drin. Ich möchte angeben einer maximalen Höhe für das div, und verstecken Sie die Teile des Bildes überschreiten diese Höhe. Aber ich möchte auch halten Sie das Bild vertikal zentriert im div und zeigt nur seinen mittleren Teil.

Zum Beispiel, wenn browser-Breite von 1200px und Bild-Seitenverhältnis ist 4:3, Bild anzeigen soll (1200x900)px. Aber wenn wir wollen, Ernte Höhe auf 300px nur und vertikal zentrieren, Bild sollte die position an -300px innerhalb des div (und das div zu verstecken 0-300 und 600-900 der Bildhöhe). Ähnliche Gedanken können für andere widhts.

Ich bin mir ziemlich sicher, dass dies kann leicht getan werden mit javascript, aber ich würde gerne wissen, ob es eine Möglichkeit gibt, es zu tun mit CSS zu. Vielen Dank im Voraus!

InformationsquelleAutor Giorgio | 2013-12-06

  1. 6

    Meine Meinung dazu: http://codepen.io/vsync/pen/DpmnK

    HTML

    <div class='box'>
  <img src="http://www.biztalk360.com/Events/BizTalk-Innovation-day-2014-Norway/images/banner.jpg">
</div>

    SCSS

    .box{
  //this is the image container distentions 
  width:100%;
  height:100px;

  //The magic
  > img{
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%, -50%); 
    &.max{ width:auto; height:100%; }
  }
}

    javascript (dies ist nur für die Reaktionsfähigkeit)

    var photo     = document.images[0],
    container = document.querySelector('.box');

$(window).on('resize.coverPhoto', function(){
  requestAnimationFrame(checkRatio);
});

function checkRatio(){
  var state = photo.clientHeight <= container.clientHeight && 
              photo.clientWidth >= container.clientWidth;

  photo.classList[state ? 'add' : 'remove']('max');
}

    InformationsquelleAutor vsync

  2. 1

    Möchten Sie vielleicht, um Blick auf diese Frage : Resizeing ein überdimensionales Bild mit overflow:hidden und halten Sie das Seitenverhältnis

    http://codepen.io/gcyrillus/pen/Grbxg

    .grid_3 { width:260px; margin:0 20px; float:left;  text-align:center;
  overflow:hidden;background:rgba(255,255,255,0.02);}

.grid_3 a {
  display:block;  
  height:171px; border:solid 2px #FFFFFF;
  line-height:168px;
  overflow:hidden;
  margin-bottom:10px;
}
.max-img-border {  width:100%; margin:-100% 0;vertical-align:middle;
}

    hier ist ein weiterer Stift , erforschen diese , vertical-align:middle und ein Bild mit praktisch keine Höhe in den Fluss.http://codepen.io/gc-nomade/pen/DxCgv

    Natürlich Bild gesetzt, im hintergrund Mitte ist einfach, wenn es keine Bedeutung hat, die in Ihrem Inhalt.

    overflow:hidden meinen Tag gerettet!

    InformationsquelleAutor G-Cyr

  3. 0

    Du willst also die div-Funktion als ein Anzeige-Fenster für Ihr Bild? Das klingt wie image-sprites (ein großes Bild von icons zusammen, wo jedes Symbol einzeln angezeigt), aber mit einem größeren Bild:

    http://www.w3schools.com/css/css_image_sprites.asp

    Wenn Sie ein JSFiddle, ich kann dir etwas spezifischer.

    InformationsquelleAutor thefourtheye

Schreibe einen Kommentar