Question

我正在尝试为照片制作一个CSS网格，但是img元素未在网格项中显示图像。我使用的url没什么问题，因为它可以在页面的其他部分工作，但不适用于网格系统。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
  max-height: 100%;
}

<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

我在做什么错了？

Answer 1

这是两个CSS属性的组合。一个是import java.awt.Color; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.Rectangle2D; import java.util.HashMap; import java.util.Map; import java.util.Random; import javax.swing.JComponent; public class TetrisComponent extends JComponent{ private Map <String, Object> rectanglesIseries; private Random randomGenerator; public TetrisComponent() { rectanglesIseries = new HashMap<>(); randomGenerator = new Random(); } private void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; rectangleInitializer(g2,Color.black,Color.CYAN,new int[] {0, 100, 50, 50},"i"); rectangleInitializer(g2,Color.black,Color.CYAN,new int[] {50, 100, 50, 50},"i2"); rectangleInitializer(g2,Color.black,Color.CYAN,new int[] {100, 100, 50, 50},"i3"); rectangleInitializer(g2,Color.black,Color.CYAN,new int[] {150, 100, 50, 50},"i4"); } private void paintComponentj(Graphics g){ Graphics2D g2 = (Graphics2D)g; rectangleInitializer(g2,Color.black,Color.blue,new int[] {200, 500, 50, 50},"j"); rectangleInitializer(g2,Color.black,Color.blue,new int[] {250, 500, 50, 50},"j2"); rectangleInitializer(g2,Color.black,Color.blue,new int[] {300, 500, 50, 50},"j3"); rectangleInitializer(g2,Color.black,Color.blue,new int[] {300, 500, 50, 50},"j4"); } private void rectangleInitializer(Graphics2D g2,Color drawColor,Color fillColor, int [] size, String element) { rectanglesIseries.put(element, (Object)new Rectangle2D.Double()); g2.setColor(drawColor); g2.draw((Rectangle2D.Double)rectanglesIseries.get(element)); g2.setColor(fillColor); g2.fill((Rectangle2D.Double)rectanglesIseries.get(element)); } public void randomComponentBuilder(Graphics g) { if (randomGenerator.nextBoolean()) { paintComponent(g); } else { paintComponentj(g); } } }选择器中的display: grid;，另一个是.wrapper选择器中的max-height: 100%;。

首先，可以通过从选择器中删除.wrapper > div img来避免，但是如果需要保留max-height: 100%;属性，则需要在max-height: 100%;选择器中添加display: block;，如下所示：

.wrapper > div img

Answer 2

请从css中删除最大高度。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  width:100%;
}
.wrapper > div img {
  max-width:100%;
}

<div id="content">
  <div class="wrapper">
    <div><img src="http://placekitten.com/1000/500"></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

Answer 3

您可以在包装类中设置图像宽度

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
}

<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

如何在CSS网格中显示图像？

3 个答案: