时间戳

首页 > 解决方案 > 无法将图像放入网格卡内

html - 无法将图像放入网格卡内

问题描述

这应该是微不足道的，但我无法让图像适合响应网格内的卡片：这是 CSS：

body {
  background-color: gery;
}

.cards {
  margin: 0 auto;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: auto;
  gap: 20px;
   padding-top: 30px;
 
}

.card {
  background-color: #fff;
  line-height: 1.5;
  font-size: 1.1em;
  padding: 15px;
  background: #fafafa;
}

.card__image {
    width: 100% !important;
    height: 150px;
    object-fit: cover;
    display: block;
}

和 HTML

<div class="cards">
        <div class="card"> 
                    <a href="#">                       
                        <img class="card__image" loading="lazy" src="https://fakeimg.pl/200x100/ff0000/">                     
                    </a>
                <strong><a href="/#"> loerm ipsum</a></strong>               
        </div>
        <div class="card">                
                    <a href="#">                       
                        <img class="card__image" loading="lazy" src="https://fakeimg.pl/200x100/ff0000/">                     
                    </a>
                <strong><a href="/#">bla blaxum</a></strong>   
        </div>
</div>

代码笔：

https://codepen.io/bcodus/pen/RwpGYaQ

请注意，img 周围有一个不应存在的边距。

感谢您帮助解决此问题。

标签： htmlcsscss-grid

解决方案

推荐阅读