4
votes

Comment faire une superposition sur une image pour couvrir l'image dans un conteneur à défilement

J'ai une image de taille variable. Cette image est à l'intérieur d'un conteneur avec overflow: auto . Je veux placer une grille sur cette image - ce qui fonctionne bien, tant que l'image est plus petite que le conteneur. Dès que le conteneur a des barres de défilement, la superposition de la grille est limitée à la hauteur / largeur du conteneur et ne couvrira pas l'image.

Notez que fixed n'est pas une option, car il s'agit d'une utilisation simplifiée Cas. J'exige que la superposition défile réellement avec l'image.

(Le cas d'utilisation réel aura plusieurs superpositions, mais pour cette démo, une seule superposition devrait suffire à démontrer le problème). P >

La mise à l'échelle de l'image n'est pas non plus une option.

Placer l'image dans une balise différente pourrait être une option, mais comme la taille de l'image peut varier, je ne peux pas avoir un div avec une taille fixe qui a l'image comme image d'arrière-plan non plus - au moins je ne sais pas comment faire en sorte que ce div ait la taille réelle de l'image.

Je suppose que ce serait bien si le code> pourrait être le conteneur de la superposition, mais AFAIK, img est une balise à fermeture automatique qui ne permet pas d'avoir des enfants.

Dans d'autres questions similaires, les utilisateurs ont suggéré d'utiliser hauteur: auto; min-height: 100%; pour la superposition, mais cela ne fonctionne pas, comme la taille du conteneur ne change pas vraiment, c'est juste que le contenu devient scrollable.

Si possible, j'aimerais pour éviter que JS ne calcule la hauteur et la largeur de la superposition.

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>

.container {
  position: relative;
  height: 200px;
  overflow: auto;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: repeating-linear-gradient(  0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px),
                        repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);  
}

html css

0 commentaires

3 Réponses :

2
votes

Le problème ici est que 100% est toujours mesuré sur la hauteur de l'élément parent. Dès que vous changez la hauteur par ex. 200px le 100% équivaut à ce montant.

La solution la plus simple à mon avis est de simplement envelopper le tout dans un autre conteneur qui obtient la hauteur fixe et laisser l'intérieur conteneur libre de se développer au besoin. De cette façon, la hauteur du conteneur interne est calculée sur ses enfants et les grilles 100% sont en effet à 100%.

<div class="outer-container">
  <div class="container">
    <img src="https://lorempixel.com/500/500/" />
    <div class="overlay"></div>
  </div>
</div>

.outer-container {
  height: 200px;
  overflow: auto;
}

.container {
  position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: repeating-linear-gradient(  0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px),
                        repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);  
}

1 commentaires

Ça a l'air bien jusqu'à présent. Je vais essayer de l'implémenter dans mon projet. Si cela fonctionne, j'accepterai et voterai volontiers.

4
votes

CSS-Grid peut faire cela..aucune valeur de position n'est requise.

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>

.container {
  height: 200px;
  display: inline-grid;
  overflow: auto;
}

img,
.overlay {
  grid-column: 1;
  grid-row: 1;
}

.overlay {
  z-index: 2;
  background-image: repeating-linear-gradient( 0deg, transparent, transparent 10px, #eee 10px, #eee 11px), repeating-linear-gradient( -90deg, transparent, transparent 10px, #eee 10px, #eee 11px);
}

1 commentaires

Bien, j'aime le fait qu'il n'a pas besoin d'enveloppe / conteneur externe supplémentaire.

1
votes

Je voudrais ajouter un élément (.wrapper) et l'utiliser comme référence de taille. Ensuite, vous êtes flexible avec les tailles d'image.

<div class="container">
  <div class="wrapper">
    <img src="https://lorempixel.com/500/500/" />
    <div class="overlay"></div>
  </div>
  </div

.container {
  height: 200px;
  overflow: auto;
}

.container>.wrapper {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px), repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);
}

0 commentaires