4
votes

Comment puis-je étendre la hauteur d'une image équidistante au-delà de son conteneur pleine largeur?

J'ai une image que j'aimerais étendre au-delà de son conteneur parent, juste en haut et en bas, à la même distance. Je peux obtenir cet effet en haut, mais je ne peux pas le faire en bas. Comment puis-je obtenir cet effet tout en restant réactif et en conservant le contenu restant chez le parent?

J'ai essayé différentes méthodes de positionnement absolu, mais j'ai continué à casser la grille. J'ai pu réaliser ce que j'ai jusqu'à présent en utilisant des marges négatives, mais seulement en plus.

C'est le code très basique que j'ai jusqu'à présent et voici le jsfiddle. :

<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
}

.col {
  width: 50%;
}

.col-image {
  margin-top: -20px;
}

p {
  padding: 20px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

html css image

0 commentaires

3 Réponses :

1
votes

Le positionnement semble fonctionner

<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
  position: relative;
}

.col {
  width: 50%;
}

.col-image {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 50%
}

p {
  padding: 20px;
}

img {
  display: block;
  height: 100%;
}

1 commentaires

Merci pour les commentaires. J'avais initialement commencé avec quelque chose comme ça, mais je suis tombé sur le problème où la largeur de l'image ne s'ajusterait pas avec la largeur du conteneur parent.

1
votes

Vous pouvez également jouer avec l'arrière-plan de l'élément band pour simuler ceci

<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</div>

.band {
  background: 
    url(https://via.placeholder.com/800x450?text=fpo) calc(50% + 160px) 0/auto 100%,
    linear-gradient(#ddd,#ddd) center/100% calc(100% - 40px);
  background-repeat:no-repeat;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col {
  width: 50%;
}

p {
  padding:40px 20px;
}

1 commentaires

J'aime ça! Une façon que je n'avais pas envisagée. Cependant, pour l'avenir, cette image pourrait également devenir une vidéo. Je vais devoir l'ajouter à ma boîte à outils malgré tout. Merci!

2
votes

Autre solution utilisant un positionnement marges négatives et absolu sur l'image:

utiliser des marges négatives pour la compensation de la deuxième colonne,
l'utilisation du positionnement absolu de l'image dans la deuxième colonne garantit que la hauteur est déterminée par la colonne de gauche (car le conteneur row est une flexbox et align-items: stretch est la valeur par défaut), et
utilisez object-fit: cover pour conserver les proportions de l'image.

Voir la démo ci-dessous:

<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
}

.col {
  width: 50%;
}

.col-image {
  margin: -20px 0 -20px 0; /* negative margin */
  position: relative;
}

p {
  padding: 20px;
}

img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* absolute positioning */
  position: absolute;
  top: 0;
  left: 0;
}

2 commentaires

@joewindetc violon simplifié pour ce qui précède: jsfiddle.net/xhue8bvw

C'est parfait, exactement ce que je cherchais. Merci beaucoup. Et puis merci pour l'introduction à object-fit , c'est une nouveauté pour moi.