Comment puis-je supprimer le rembourrage de cette étiquette d'ancrage autour des images?

Comment puis-je supprimer l'étiquette d'ancrage autour de l'espace vide des images? En ce moment, les espaces vides sont cliquables et je ne le veux pas. Passez la souris sur les espaces vides autour des images et vous obtiendrez de quoi je parle. Le lien codepen est https://codepen.io/sakirinteser/pen/rGvbmO Comment puis-je supprimer le rembourrage de cette étiquette d'ancrage autour des images?

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
} 
 

 
.thumbs img { 
 
    width: 60%; 
 
    padding: 0 !important; 
 
} 
 

 
.portfolio a { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
}

<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

Comment puis-je retirer le rembourrage de une balise dans les espaces vides autour des images? Toute aide est appréciée.

Source

2017-10-10 Sakir Inteser

contrôle la largeur de l'élément flexible, pas l'image.

Plus précisément, définissez l'élément flexible sur la largeur de votre choix, puis agrandissez les images à l'intérieur (width: 100%).

Au lieu de cela:

.thumbs { 
    display: flex; 
    justify-content: space-around; 
    margin-bottom: 2%; 
} 

.portfolio a { 
    margin: 0 auto; 
    text-align: center; 
} 

.thumbs img{ 
    width: 60%; 
    padding: 0 !important; 
}

Essayez ceci:

.thumbs { 
    display: flex; 
    justify-content: space-around; 
    margin-bottom: 2%; 
} 

.portfolio a { 
    flex: 0 0 25%; /* new; flex-grow: 0, flex-shink: 0, flex-basis: 25% */ 
    /* margin: 0 auto; */ 
    /* text-align: center; */ 
} 

.thumbs img { 
    width: 100%; /* new */ 
    padding: 0 !important; 
    vertical-align: top; /* optional; to remove descender space; 
          https://stackoverflow.com/q/31444891/3597276 */ 
}

https://codepen.io/anon/pen/pWVmzy

Source

2017-10-10 18:25:12

Pourriez-vous expliquer ce que flex: 0 0 25%; est? Ou me lier à une documentation à ce sujet? Je suis actuellement sur mobile et votre réponse fonctionne, je vais la marquer comme une réponse correcte une fois que je l'ai testé sur mon bureau. Je vous remercie. –

C'est un raccourci pour 'flex-grow',' flex-shrink' et 'flex-basis'. Dans ce cas, il dit, * ne pas grandir *, * ne pas réduire *, définir une largeur fixe de 25%. –

faire la .portfolio a{ width: 60%} et changer .thumbs img { width: 100%;}

Source

2017-10-10 18:18:57

Cela remplit l'espace vide avec l'image elle-même, je pense que l'utilisateur veut pas d'espace vide cliquable –

Ensuite, l'espace blanc autour d'eux ne reste pas. Je veux ces espaces blancs –

si vous changez cela en '.portfolio a {flex-basis: 30%; } ', je pense que vous aurez une réponse utile. – worc

En raison d'une downvote sans explication, je dois expliquer un certain nombre de choses (ou demandé)

comment% la largeur ou la hauteur sont-elles calculées habituellement?

https://www.w3.org/TR/CSS2/visudet.html#the-width-property

<percentage>

Spécifie une largeur de pourcentage. Le pourcentage est calculé par rapport à la largeur du bloc contenant la boîte générée. Si la largeur du bloc conteneur dépend de la largeur de cet élément, la présentation résultante n'est pas définie dans CSS 2.1. Remarque: Pour les éléments en position absolue dont le bloc conteneur est basé sur un élément de conteneur de blocs, le pourcentage est calculé par rapport à la largeur de la boîte de remplissage de cet élément.

Ceci est un changement de CSS1, où la largeur en pourcentage a toujours été calculée par rapport à la zone de contenu de l'élément parent.

Dans ce cas, img n'est pas un bloc et non un enfant direct du corps, largeur de parent est inconnu si nous basiquement pourrions avoir 60% x nul qui donne nul, rien à appliquer vraiment
- mais ici, nous avons un enfant flex ... il coud travailler sans la nécessité de définir une largeur sur le parent, mais si l'image est de 60% de son parent ... parent ne peut pas être 100% de son propre 60%. hmm quelque chose de mal ici dans la logique, n'est pas?

Donc, pour éviter une erreur de calcul et les résultats drôles, être clair, vous pouvez utiliser vw ou d'unités, mais % pour faire la largeur est correctement fixé et calculé ...

/* trick to see where elements stand */ 
 

 
* {/* see me */box-shadow:0 0 0 2px red} 
 

 
.portfolio h2{ 
 
\t text-align: center; 
 
\t font-size: 2.5em; 
 
\t color: #27292d; 
 
\t padding-top: 4%; 
 
\t line-height: 1.3; 
 
} 
 

 
.port{ 
 
\t text-align: center; 
 
\t color: #27292d; 
 
\t padding-bottom: 3%; 
 
} 
 

 
.thumbs{ 
 
\t display: flex; 
 
\t margin-bottom: 2%; 
 
    /*padding:0 6.25vw; *//* a quart of img 's width that you can also calculate and set as padding to even the three blank space */ 
 
    justify-content:space-around; 
 
} 
 

 
.thumbs img{ 
 
\t max-width: 25vw; 
 
    vertical-align:top; 
 
} 
 

 
.portfolio a.swipebox{ 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    flex-shrink:1; 
 
}

<div class="portfolio"> 
 
\t \t <section> 
 
\t \t \t <h2>Past Work</h2> 
 
\t \t \t <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 
\t \t \t <div class="thumbs designthumbs"> 
 
\t \t \t \t <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
\t \t \t \t 
 
\t \t \t </div> 
 

 
\t \t \t <div class="thumbs"> 
 
\t \t \t \t <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
\t \t \t </div> \t \t 
 
\t \t </section> 
 
\t </div>

fork of your pen

Source

2017-10-10 18:28:09

Le pourcentage de problème de remplissage/marge s'applique uniquement aux articles flexibles, pas aux conteneurs flexibles. –

@Michael_B FF a souvent été bogué lorsque l'image est redimensionnée à l'écran, mais pas à partir de l'espace initialement utilisé ... vw unités évite ce comportement amusant que j'ai remarqué récemment. Aucune idée si des bogues ont été officiellement écrits à ce sujet ou s'il y a quelque chose d'autre impliqué. n'a pas creusé –

Ok, je pense que je vois ce que tu essayais de faire. Vous avez défini vos images à la largeur: 60%, mais elles sont à l'intérieur d'une ancre qui est entièrement la moitié du conteneur de pouces. Donc, vraiment, vos images représentent 60% de la moitié du conteneur, mais les ancres sont toujours à moitié.

Par défaut, la propriété flex de vos ancrages sera flex: 0 1 auto, ce qui est court pour ne pas grossir, rétrécir et déterminer automatiquement la largeur de cet élément flexible. Dans ce cas, auto distribuera tout l'espace disponible entre l'élément conteneur et les éléments enfants. Dans votre cas, avec deux ancrages, les deux ont reçu l'espace restant dans leur conteneur et ils ont chacun la moitié de la largeur. Donc, j'ai changé vos images à 100% (la largeur totale de leur ancre contenant). Et puis changé la propriété d'ancrages flex à flex: 0 1 30%. Donc, ils seront 30% de la largeur de leur élément contenant. Maintenant, vous ne devriez avoir aucun espace cliquable en marge:

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    border: 2px solid black; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
    width: 500px; 
 
} 
 

 
/*.portfolio a*/ 
 
.thumbs a { 
 
    border: 2px dotted red; 
 
    flex: 0 1 30%; 
 
    /*margin: 0 auto;*/ 
 
    text-align: center; 
 
} 
 

 
.thumbs img { 
 
    border: 2px solid black; 
 
    width: 100%; 
 
    /*padding: 0 !important;*/ 
 
}

<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

Source

2017-10-10 18:32:17 worc

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
} 
 

 
.thumbs img { 
 
    width: 100%; 
 
    padding: 0 !important; 
 
} 
 

 
.portfolio a { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 30%; 
 
}

<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

Source

2017-10-10 19:15:28

Comment puis-je supprimer le rembourrage de cette étiquette d'ancrage autour des images?

Répondre

Questions connexes