Wie richte ich Bilder mithilfe eines CSS-Rasters aus?

Question

Ich versuche, einen Teil einer Website mit CSS Grid zu erstellen. Ich versuche, dass die Liste und das Bild in derselben Zeile bleiben und verkleinert/vergrößert werden, wenn sich die Bildschirmgröße ändert. Der Code wird unten eingefügt. Jede Hilfe wird sehr geschätzt.

Ich frage mich, ob der Fehler in meiner Rastervorlage liegt.

.pm {
  display: inline-grid;
  max-width: 100%;
  position: relative;
  margin: auto;
  grid-template-areas: "title title" "list picture" "options options" "paragraph paragraph";
  grid-template-rows: 10% 1fr 20% 10%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pm h2 {
  grid-area: title;
  text-align: center;
}

.pm .container ul {
  grid-area: list;
}

.pm .container img {
  grid-area: picture;
  max-width: 30%;
  border-radius: 0.25em;
}

.pm .options {
  grid-area: options;
}

.pm .paragraph {
  grid-area: paragraph;
}

<div class="pm section">
  <h2>Preventative Maintenance:</h2>
  
  <div class="container">
    <ul>
      <li>Calibration of each piece of equipment as required.</li>
      <li>Inspect any switches, controls and/or electrical components.</li>
      <li>Inspect motor brushes and clean the motor fan vents.</li>
      <li>Inspect and tighten hardware.</li>
      <li>Inspect all belts cables and chains.</li>
      <li>Lube all moving components as required.</li>
    </ul>
    <img src="./style/images/circuit.avif">
  </div>
  
  <div class="options">
    <h3>Options:</h3>
    
    <ul>
      <li>Monthly</li>
      <li>Quarterly</li>
      <li>Semi-annual</li>
      <li>Annual</li>
    </ul>
  </div>
  
  <div class="paragraph">
    <p>Any findings will be reported in the invoice, with an option to have any findings quoted for repair, separately.</p>
    
    <p>Any parts needed, per the repair quote, would be ordered and all repairs would be scheduled following arrival of the parts.</p>
  </div>
</div>

Answer 1

图像不在图片部分中，因为它嵌套在容器内，并且 img 标签本身不是网格项。

在工作代码下方

.pm {
  display: inline-grid;
  max-width: 100%;
  position: relative;
  margin: auto;
  grid-template-areas: "title title" "list picture" "options options" "paragraph paragraph";
  grid-template-rows: 10% 1fr 20% 10%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pm h2 {
  grid-area: title;
  text-align: center;
}

.pm .container ul {
  grid-area: list;
}

.pm .img-container {
  grid-area: picture;
  max-width: 30%;
  border-radius: 0.25em;
}

.pm .options {
  grid-area: options;
}

.pm .paragraph {
  grid-area: paragraph;
}

  
Preventative Maintenance:
  
  

    

      
Calibration of each piece of equipment as required.
      
Inspect any switches, controls and/or electrical components.
      
Inspect motor brushes and clean the motor fan vents.
      
Inspect and tighten hardware.
      
Inspect all belts cables and chains.
      
Lube all moving components as required.
    
    
  
  
  

    
  

  

    
Options:
    
    

      
Monthly
      
Quarterly
      
Semi-annual
      
Annual
    
  
  
  

    
Any findings will be reported in the invoice, with an option to have any findings quoted for repair, separately.
    
    
Any parts needed, per the repair quote, would be ordered and all repairs would be scheduled following arrival of the parts.