当前位置： 文江博客话题详情

CSS边界，不需要的差距和子像素渲染问题

发布于 2025-02-01 13:26:18 字数 1859 浏览 0 评论 0原文

我正在为我的个人网站设计一个博客文章预览瓷砖。无论我尝试做什么，图像及其自身底部边框之间总是存在差距，或者图像和容器边界之间的缝隙。它出现在移动设备上，放大时以及缩放时出现。这是一个非常简单的设计，我会发疯，无法弄清楚如何使其正常工作。我知道这与子像素渲染问题有关。请帮我！我要么希望差距消失，要么呈现与边框一样的颜色，因此看起来不会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 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>

原文

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 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

柒夜笙歌凉 2025-02-08 13:26:18

我使用此图像，看来您可以更改Black_tile的背景色，因为Black会补救它。

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>

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 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>

回复 原文
情何以堪。 2025-02-08 13:26:18

这是一个被剥离的示例，不涉及对任何颜色进行硬编码。它使用绝对定位的伪元素，其边框覆盖在图像上方。给予容器的填充量比边框宽度小1px，因此在其下方呈现。 ＆lt; img＆gt;然后将其搬迁到＆lt; p＆gt;在其下方，图像的底部边缘为-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>

Here's a stripped down example that doesn't involve hard-coding any colors. It uses an absolutely positioned psuedo-element with a border that is overlaid above the image. The container is given a padding amount that is 1px smaller than the border width so it is rendered underneath it. The bottom border of the <img> is then relocated to the top of the <p> below it and the image is given a bottom margin of -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>

回复 原文
南七夏 2025-02-08 13:26:18

尝试一下可能会有所帮助。

img {
    object-fit: contain;
}

Try this may be it will help.

img {
    object-fit: contain;
}
回复 原文
雪化雨蝶 2025-02-08 13:26:18

我通过使瓷砖背景颜色与边框颜色匹配，然后用我的脚本而不是瓷砖的背景颜色设置文本的背景来解决此问题。这样，当创建缝隙时，它匹配边框颜色，看起来并不奇怪。现在，它在所有尺度上看起来都正确。它没有处理非编写图像，但是所有拉的图像均已自行折射到我的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>

在所有屏幕尺寸上看起来都很棒，没有更多的空白！

I fixed this by having the tile background color match the border color, and then setting the background of the text with my script instead of background color of the tile. That way when gaps are created it matches the border color and doesn't look weird. Now it looks correct at all scales. it doesn't handle non-cropped images but all the images pulled are autocropped to the correct size in my 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>

Looks great at all screen sizes, no more gaps!

回复 原文
~没有更多了~

关于作者

比忠

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文