[Résolu] Image hauteur fixe largeur auto centrage horizontal

Dans le genre code sale, lorsque je veux gérer un bandeau pas épais de type image + texte en responsive afin qu'il ne se transforme pas en petite chose ridicule, je fixe la hauteur à partir d'un certain point de rupture, et je mets son conteneur en overflow hidden, ce qui fonctionne.

Sauf que là j'aimerais bien que l'image reste centrée horizontalement tout en débordant donc de chaque côté afin de pouvoir travailler des visuels symétriques.

Si quelqu'un a une idée pour adapter mon code, voici un jsfiddle :
https://jsfiddle.net/38q5bgxq/

Je parle bien de centrer l'image (et non le texte qui l'est déjà) au redimensionnement de l'écran à partir du point de rupture.

Merchi !
Modifié par Manhattan (05 Jan 2017 - 17:07)

Hello,

Vu que je n'ai pas toutes les données du problème, ma solution va peut-être être idiote : pourquoi ne pas utiliser une image de background CSS en background-position: center; puisque ton image semble être une décoration ?

EDIT : sinon il reste la solution object-fit: cover + object-position: center; (qui ne fonctionnera pas sur IE)
Modifié par Raphael (05 Jan 2017 - 14:36)

Bonjour,

Et bien parce que cette image est paramétrable (sous WP) via the_post_thumbnail, ce qui n'est pas une réponse en soi vu que je pourrais remplacer mon img par du pur css vu que c'est moi qui code les templates... Disons que j'aurais bien voulu ne pas avoir à retoucher au html
Purée jviens de faire un caniuse, même edge n'accepte pas object-position, pffff Android 4.4 non plus ce qui veut dire des vieux tel mais pas tant comme mon ex galaxy s2... Argh, choix cornélien...

Bonjour.

Ça m'a l'air tiré par les cheveux... mais le code suivant a l'air de fonctionner... pas sûre qu'il n'ait pas de défaut... (à perfectionner peut-être) :

img{
  height:auto;
  max-width:100%;
  }
.headband{
  display : flex;
  align-items : center;
  justify-content : center;
  position : relative;
  }
.headband>h1{
  position:absolute;
  display:block;
  top:50%;
  left : 50%;
  margin:0;
  padding:0;
  line-height:1.6;
  transform : translateX(-50%);
  white-space : pre;
  }
@media screen and (max-width: 1100px){
  .headband{
  overflow:hidden;
  }
.headband>img{
  height:300px;
  width:auto;
  max-width:none;
  }
}