时间戳

首页 > 解决方案 > 当我在 Chrome 中调整窗口大小时显示网格卡被剪切

css - 当我在 Chrome 中调整窗口大小时显示网格卡被剪切

问题描述

我使用两列网格创建了带有 html 和 scss 的卡片，将整个屏幕一分为二，因为我想在屏幕的左半部分显示卡片，然后我再次使用网格以两行显示卡片列。问题是当我调整窗口大小时，卡片没有更新并且内容（图像、阴影等）被剪切。此问题仅在 Chrome 中发生。我确定那是我将动画添加到 menuitem 类时。并且仅在开发模式（本地主机）上。部署应用程序时，它没有任何问题。

这是html：

  <div class="appContainer">
    <div>
        <h3> Pizza </h3>
        <div class="menu__list">
            <div class="menuitem" style="background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-keto-pizza-073-1544039876.jpg?crop=0.668xw:1.00xh;0.233xw,0.00255xh&resize=480:*);">
                <span class="menuitem_title"> Cheese Pizza </span>
            </div>
            <div class="menuitem" style="background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-keto-pizza-073-1544039876.jpg?crop=0.668xw:1.00xh;0.233xw,0.00255xh&resize=480:*);">
                <span class="menuitem_title"> Pepperoni Pizza </span>
            </div>
            <div class="menuitem" style="background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-keto-pizza-073-1544039876.jpg?crop=0.668xw:1.00xh;0.233xw,0.00255xh&resize=480:*);">
                <span class="menuitem_title"> Chicken Pizza </span>
            </div>
            <div class="menuitem" style="background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-keto-pizza-073-1544039876.jpg?crop=0.668xw:1.00xh;0.233xw,0.00255xh&resize=480:*);">
                <span class="menuitem_title"> Veggie Pizza </span>
            </div>
       </div>
    </div>
 </div>

这是CSS：

.appContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.menu__list {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px 50px;
}

.menuitem {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 26px;
  box-shadow: 3px 4px 9px 0px #32322e;
  padding: 20px 0 0 20px;
  box-sizing: border-box;
  margin-top: 5px;
  filter: contrast(80%);
  transition-property: margin-top filter;
  transition-delay: 0.1s;
  transition-duration: 0.2s;

  &:hover {
    margin-top: 0px;
    // margin bottom to push the bottom item, and not make it move!
    margin-bottom: 5px;
    cursor: pointer;
    filter: contrast(100%);
    width: 100%;
    }
  }

无需调整大小的应用程序：

在此处输入图像描述

当我拖动窗口并使其变大，或将窗口拖动到具有不同分辨率的另一台显示器时，如果我重新加载卡片，应用程序将正确显示：

在此处输入图像描述

这是检查员显示的内容：

在此处输入图像描述

这是 plunkr，您可以在此处重现问题，拖动将代码与预览分开的线，如图所示：

在此处输入图像描述

https://plnkr.co/edit/FDl8WiVxj1mcq65UTXra?p=preview

我不知道还能尝试什么，我必须解决这个问题，因为如果我在浏览器未最大化时加载窗口，然后我最大化浏览器，图像就会被剪切。

标签： cssgoogle-chromelayoutcss-gridgrid-layout

解决方案

您可以尝试摆脱 menuitem 上的填充并将其放在标题上。

.menuitem {
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 26px;
    box-shadow: 3px 4px 9px 0px #32322e;
    padding: 0;
    box-sizing: border-box;
    margin-top: 5px;
}

.menuitem_title {
    display: block;
    padding: 20px; 
}

推荐阅读