css - 有没有办法使用 css 制作一个尺寸的图像？

Question

问题是我希望容器中的图像大小相同，但我得到的是容器增长或缩小以适应图像或从容器中伸出的图像。

<div class="grid-container">
  <article class="card">
    <div class="content">
      <h4>Title</h4>                
      <p>something about the website</p>               
    </div>
    <div class="img-box">              
      <a href="#"><img src="./img/work-1.jpg" alt=""> 
      </a>                 
    </div>
</div>

.grid-container {
  display: grid;
}

.card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: aqua;
  margin: 1rem 0;
  padding: 0.5rem;
  align-items: start;
  justify-items: start;
}



.card img {
  display: block;
}

.img {
max-width: 100%;
}

标签： css

Answer 1

这可能会帮助你

img{
   height: auto;
   width: 100%;
}