基于内容的网格列宽不起作用

Posted 2023-03-06

【中文标题】基于内容的网格列宽不起作用

【英文标题】：Grid column width based on content not working

【发布时间】：2021-04-12 04:07:13

【问题描述】：

我使用 CSS 网格定义了以下布局，请参见下面的演示：

.blog-post 
  display: grid;
  grid-template-rows: minmax(auto, max-content) 1fr;
  grid-template-columns: auto minmax(auto, max-content);
  background: #fff;
  border: 5px solid #fff;
  border-radius: 10px;
  height: 100%;
  grid-column: 2/-1;
  width: 100%;


.blog-post h1 
  grid-column: 1/-1;
  padding-bottom: 20px;


.blog-post img 
  grid-row: 2;
  grid-column: 2;
  height: 100%;


.blog-post p 
  grid-row: 2;
  grid-column: 1;

<div id="blog-post-item" class="blog-post">
  <h1>Some amazing blogpost title about something super cool!</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/3-4_ratio_mobile_wallpaper_example.jpg">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
  </p>
</div>

但正如您在下图中看到的那样，该图像位于网格之外：

我该如何解决这个问题？

如果需要更多说明或信息，请告诉我，以便我编辑问题。

【问题讨论】：

imgheight:100%; 是必须的吗？你试过object-fit属性吗？

是的，imgheight:100% 是必须的，因为它确保它在整体布局中看起来不错。它尝试了object-fit，但随后图像被截断或压扁，这是不希望的。如果我需要更改 html 以使其正常工作，我愿意接受 :)

如果高度 100% 是必须的，在某一时刻，图像将与视口一样宽，而在此之前，文本的空间会非常小，使其变得糟糕且难以阅读。您应该以某种方式允许它在文本下方或上方换行，我猜将需要媒体查询。

是的，你是对的，但我的风格解释了这个问题。但这与我遇到的问题无关..

我遇到了类似的问题，但你的问题本身回答了我的问题：D

【参考方案1】：

我刚刚尝试了另一个图片链接，样式似乎是正确的。 但是尝试在浏览器中查看开发人员工具，可能样式已被覆盖。

并尝试给图像标签一个容器的max-width: 100%;

.blog-post 
  display: grid;
  grid-template-rows: minmax(auto, max-content) 1fr;
  grid-template-columns: auto minmax(auto, max-content);
  background: #fff;
  border: 5px solid #fff;
  border-radius: 10px;
  height: 100%;
  grid-column: 2/-1;
  width: 100%;


.blog-post h1 
  grid-column: 1/-1;
  padding-bottom: 20px;


.blog-post img 
  grid-row: 2;
  grid-column: 2;
  height: 100%;


.blog-post p 
  grid-row: 2;
  grid-column: 1;

<div id="blog-post-item" class="blog-post">
  <h1>Some amazing blogpost title about something super cool!</h1>
  <img src="https://media.gettyimages.com/photos/stack-of-books-picture-id157482029?s=612x612">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
  </p>
</div>

【讨论】：

我检查了样式没有被覆盖。当使用你的图像时它仍然不起作用。

有调试链接吗？

对不起，我没有链接

【参考方案2】：

图像在 CSS 网格中的表现略有不同。如前所述，它们不会占据整个网格。 一种可能的解决方案是，尝试将该图像包装在 div 中并相应地放置该 div。这应该可以解决问题。

我已经相应地更新了 html 和 css。请查看Image Placing in Grid 以供参考。

*,*::before,*::after 
  margin: 0;
  padding: 0;
  bpx-sizing: inherit;


html 
  box-sizing: border-box;


body 
  background-color: orangered;


.blog-post `enter code here`
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-row-gap: 10px;
  background-color: white;
  margin: 30px;
  padding: 20px;
  border-radius: 10px;


.blog-post h1 
  grid-column: 1 / -1;


.blog-post div 
  grid-column: 7 / 9;
  grid-row: 2 / 3;


img 
  width: 50%;


.blog-post p 
  grid-column: 1 / 6

<div id="blog-post-item" class="blog-post">
  <h1>Some amazing blogpost title about something super cool!</h1>
  <div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/544px-CSS3_logo_and_wordmark.svg.png">
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
  </p>
</div>