Culture centrée sur l'image à l'intérieur de la div

J'ai un div contenant une image (img) de l'élément, qui s'étend sur 100% de la largeur à l'intérieur. Je tiens à spécifier un maximum de hauteur de la div, et de cacher les parties de l'image dépassement de cette hauteur. Mais je veux aussi garder cette image centrée verticalement à l'intérieur de la div pour afficher uniquement sa partie centrale.

Par exemple, si la largeur du navigateur est 1200px et de l'image ratio d'aspect de 4:3, l'image doit s'afficher (1200x900)px. Mais si nous voulons à la hauteur de la culture à 300px seulement et centrer verticalement, l'image doit se placer au -300px à l'intérieur de la div (et la div doit cacher 0-300 et 600-900 de la hauteur de l'image). Des pensées similaires peuvent être faites pour d'autres widhts.

Je suis sûr que cela peut être fait facilement avec le javascript, mais je voudrais savoir si il existe un moyen de le faire avec du CSS aussi. Merci à l'avance!

OriginalL'auteur Giorgio | 2013-12-06

  1. 6

    Mon point de vue sur ce: 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 (ce n'est que pour la réactivité)

    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');
}

    OriginalL'auteur vsync

  2. 1

    Vous pouvez regarder cette question : Resizeing une immense image à l'aide de overflow:hidden et de garder le ratio d'aspect

    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;
}

    voici un autre stylo , en explorant ce , vertical-align:middle et une image avec pratiquement pas de hauteur dans le flux.http://codepen.io/gc-nomade/pen/DxCgv

    Bien sûr , l'ensemble des images en arrière-plan center est facile si elle n'a pas de sens dans votre contenu.

    overflow:hidden sauvé ma journée!

    OriginalL'auteur G-Cyr

  3. 0

    Vous voulez donc la div pour fonctionner comme une fenêtre de visualisation pour votre image? Cela ressemble à l'image des sprites (un grand pic d'icônes mettre ensemble où chaque icône est affichée individuellement), mais avec une image plus grande:

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

    Si vous fournissez un JSFiddle, je peux vous donner quelque chose de plus spécifique.

    OriginalL'auteur thefourtheye