CSS Borders, Unwanted Gaps and Sub-Pixel Rendering Issues-CodePudding

I'm designing a blog post preview tile for my personal website. Whatever I try to do, there is always a gap between the image and its own bottom border, or a gap between the image and the border of the container. It appears on mobile, when zooming, and when scaling. It's a really simple design and I'm going crazy and can't figure out how to get it to work. I know it's related to sub pixel rendering issues. Please help me! I would either like the gap gone or to render as the same color as the border so it doesn't look jank.

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 >
    <img  src="https://example.com/titlecard_location">
    <div >
      <img  src="https://example.com/img_location">
      <p >Text Goes Here</p>
    </div>
  </div>
</body>

CodePudding user response：

I play with this image and it seems like you can just change the background-color of your blog_tile as black will remedy it.

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 >
    <img  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 >
      <img  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 >Text Goes Here</p>
    </div>
  </div>
</body>

CodePudding user response：

Try this may be it will help.

img {
    object-fit: contain;
}