Bordures CSS, espaces non désirés et problèmes de rendu de sous-pixels

Question

Bordures CSS, espaces non désirés et problèmes de rendu de sous-pixels

Demandé el 27 de Mai, 2022: Quand la question a-t-elle été
101 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train de concevoir une tuile de prévisualisation d'un article de blog pour mon site Web personnel. Quoi que j'essaie de faire, il y a toujours un écart entre l'image et sa propre bordure inférieure, ou un écart entre l'image et la bordure du conteneur. Cet écart apparaît sur les mobiles, lors du zoom et de la mise à l'échelle. Il s'agit d'une conception très simple, mais je deviens fou et je n'arrive pas à trouver comment la faire fonctionner. Je sais que c'est lié à des problèmes de rendu de sous-pixels. Aidez-moi, s'il vous plaît ! J'aimerais que l'espace disparaisse ou que le rendu soit de la même couleur que la bordure pour que ça ne fasse pas ringard.

body {
    background: rgba(255, 225, 172, 1);
    display: grid;
    grid-template-rows: [row-start] 1fr [row-end row2-start] 6fr [row2-end row3-start] 1fr [row3-end];
    grid-template-columns: [col-start] 1fr [col-end];
    row-gap: 60px;
    padding-left: 120px;
    padding-right: 120px;
}

.blog_preview_container {
    grid-row: 2;
    grid-column: 1;
    height: 354px !important;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.blog_preview_titlecard {
    height: 352px;
    width: 272px;
}

.blog_tile {
    height: 340px !important;
    width: 240px !important;
    margin: 1px;
    background-color: white;
    border: 6px solid black;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
    color: white;
    display: inline;
    overflow: hidden;
    cursor: pointer;
    transform: scale(1);
}

.blog_tile:hover {
    transform: scale(1.05);
}

.blog_tile_image {
    display: block;
    border-bottom: 6px solid black;
}

.blog_tile_text {
    height: 138px;
    font-family: 'nunito', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
    padding: 16px;
}

<body>
  <div class="blog_preview_container">
    <img class="blog_preview_titlecard" src="https://example.com/titlecard_location">
    <div class="blog_tile">
      <img class="blog_tile_image" src="https://example.com/img_location">
      <p class="blog_tile_text">Text Goes Here</p>
    </div>
  </div>
</body>

Demandé el 27 de Mai, 2022 par AveryH

Answer 1

4 Réponses

Answer 2

3voto

Crystal Points 653

Je joue avec cette image et il semble que vous pouvez simplement changer la couleur de fond de votre blog_tile comme le noir y remédiera.

body {
    background: rgba(255, 225, 172, 1);
    display: grid;
    grid-template-rows: [row-start] 1fr [row-end row2-start] 6fr [row2-end row3-start] 1fr [row3-end];
    grid-template-columns: [col-start] 1fr [col-end];
    row-gap: 60px;
    padding-left: 120px;
    padding-right: 120px;
}

.blog_preview_container {
    grid-row: 2;
    grid-column: 1;
    height: 354px !important;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.blog_preview_titlecard {
    height: 352px;
    width: 272px;
}

.blog_tile {
    height: 340px !important;
    width: 240px !important;
    margin: 0px;
    border: 6px solid black;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
    color: white;
    background-color: white;

}

.blog_tile:hover {
    transform: scale(1.05);
    margin-top: 0px;
    background-color: black;
}

.blog_tile img {    
    height: 340px;
    width: 242px;
    object-fit: cover;
    margin: -1px 0px 0px -1px;

    }

.blog_tile_image {
    display: block;
    border-bottom: 6px solid black;
}

.blog_tile_text {
    height: 138px;
    font-family: 'nunito', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
    padding: 16px;
    color: white;
}

<body>
  <div class="blog_preview_container">
    <img class="blog_preview_titlecard" src="https://media.istockphoto.com/photos/picturesque-morning-in-plitvice-national-park-colorful-spring-scene-picture-id1093110112?k=20&m=1093110112&s=612x612&w=0&h=3OhKOpvzOSJgwThQmGhshfOnZTvMExZX2R91jNNStBY=">
    <div class="blog_tile">
      <img class="blog_tile_image" src="https://media.istockphoto.com/photos/picturesque-morning-in-plitvice-national-park-colorful-spring-scene-picture-id1093110112?k=20&m=1093110112&s=612x612&w=0&h=3OhKOpvzOSJgwThQmGhshfOnZTvMExZX2R91jNNStBY=">
      <p class="blog_tile_text">Text Goes Here</p>
    </div>
  </div>
</body>

Répondu el 27 de Mai, 2022 par Crystal (653 Points )

Answer 3

1voto

Besworks Points 276

Voici un exemple simplifié qui n'implique pas de codage en dur des couleurs. Il utilise un pseudo-élément positionné de manière absolue avec une bordure qui est superposée au-dessus de l'image. The container is given a padding amount that is 1px smaller than the border width so it is rendered underneath it. La bordure inférieure du <img> est ensuite déplacée vers le haut du <p> situé en dessous et l'image reçoit une marge inférieure de -1px.

*, *::after, *::before { box-sizing: border-box; }

body {
  background: rgba(255, 225, 172, 1);
  display: grid;
  align-items: center;
  justify-content: center;
}

.blog_tile {
  position: relative;
  display: grid;
  grid-template-rows: max-content 1fr;
  height: 340px;
  width: 240px;
  padding: 5px;
  background-color: white;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
  color: white;
  cursor: pointer;
  overflow: hidden;
}

.blog_tile::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 6px solid black;
}

.blog_tile:hover {
  transform: scale(1.05);
}

.blog_tile img {
  display: block;
  margin-bottom: -1px;
  object-fit: cover;
  line-height: 0;
  white-space: collapse;
}

.blog_tile p {
  margin: 0; padding: 3px;
  border-top: 6px solid black;
  color: black;
}

<div class="blog_tile">
  <img src="https://picsum.photos/300">
  <p> TESTING </p>
</div>

Répondu el 28 de Mai, 2022 par Besworks (276 Points )

Answer 4

0voto

Aashir Azeem Points 19

Essayez ceci, peut-être que cela vous aidera.

img {
    object-fit: contain;
}

Répondu el 27 de Mai, 2022 par Aashir Azeem (19 Points )

Answer 5

0voto

AveryH Points 41

J'ai corrigé cela en faisant en sorte que la couleur de fond de la tuile corresponde à la couleur de la bordure, puis en définissant le fond du texte avec mon script au lieu de la couleur de fond de la tuile. De cette façon, lorsque des écarts sont créés, cela correspond à la couleur de la bordure et ne semble pas bizarre. Maintenant, il semble correct à toutes les échelles. Il ne gère pas les images non rognées mais toutes les images tirées sont autocroppées à la taille correcte dans mon PHP.

window.onload = () => {
        var colors = ['#ffffff', '#ffbd4b', '#ff634b', '#4b9fff'];
        var nowhitecolors = ['#ffbd4b', '#ff634b', '#4b9fff'];
        document.querySelectorAll('.blog_tile').forEach(
            el => {
                        var randcolor = colors[Math.floor(Math.random() * colors.length)];
                        el.style.backgroundColor = '#ffffff';
                        el.children[1].style.backgroundColor = randcolor;
                        if (randcolor ==='#ffffff') {
                                var randnowhitecolors = nowhitecolors[Math.floor(Math.random() * nowhitecolors.length)];
                                el.style.borderColor = randnowhitecolors;
                                el.children[0].style.borderColor = randnowhitecolors;
                                el.style.backgroundColor =randnowhitecolors;
                                el.style.color = randnowhitecolors;
                        };
                }
        );

};

.blog_preview_container {
    grid-row: 2;
    grid-column: 1;
    height: 354px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 40px;
    row-gap: 40px;
}

.blog_tile {
    height: 340px;
    width: 240px;
    margin-top: 0px;
    border-width: 6px;
    border-style: solid;
    border-radius: 6px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
    color: white;
    display: inline;
    cursor: pointer;
    transform: scale(1);
}

.blog_tile:hover {
    transform: scale(1.04);
}

.blog_tile img {
    height: 164px;
    width: 240px;
    padding: 0px;
    margin: 0px;
    object-fit: cover;
    border-bottom-width: 6px;
    border-bottom-style: solid;
}

.blog_tile p {
    height: 138px;
    font-family: 'nunito', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    line-height: 22px;
    margin: 0;
    padding: 16px;
}

<body>
  <div class="blog_preview_container">
    <div class="blog_tile">
      <img class="blog_tile_image" src="https://example.com/img_location">
      <p class="blog_tile_text">Text Goes Here</p>
    </div>
  </div>
</body>

L'image est superbe quelle que soit la taille de l'écran, plus de lacunes !

Répondu el 27 de Mai, 2022 par AveryH (41 Points )

Bordures CSS, espaces non désirés et problèmes de rendu de sous-pixels

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Bordures CSS, espaces non désirés et problèmes de rendu de sous-pixels

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: