html - img 不符合网格行高
问题描述
我似乎无法让img
符合网格行( )max-height
的。45px
我也很想知道是否有一种更简洁的方法可以在不设置行高img
的情况下符合列表元素的高度。
谢谢!
.menu ul {
display: grid;
grid-gap: 10px;
padding: 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: 45px;
}
.menu a {
background: #74d3ae;
display: block;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 20px;
}
.menu img {
max-height: 100%;
max-width: 100%;
margin: 0;
padding: 0;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
<header>
<nav class="menu">
<ul id="menu-list">
<li>
<a href=""><img class="logopic" src="https://source.unsplash.com/random" alt="logo"></a>
</li>
<li>
<a href="">Beers</a>
</li>
<li>
<a href="">Wines</a>
</li>
<li>
<a href="">Desserts</a>
</li>
<li>
<a href="">Reservations</a>
</li>
</ul>
</nav>
</header>
解决方案
您可以省略其祖父母 li
:
.menu ul {
display: grid;
grid-gap: 10px;
padding: 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: 45px;
}
.menu a {
background: #74d3ae;
display: block; /* necessary */
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 20px;
}
.menu img {
width: 100%; /* optional */
height: 100%; /* necessary */
}
<header>
<nav class="menu">
<ul id="menu-list">
<a href=""><img class="logopic" src="https://source.unsplash.com/random" alt="logo"></a>
<li>
<a href="">Beers</a>
</li>
<li>
<a href="">Wines</a>
</li>
<li>
<a href="">Desserts</a>
</li>
<li>
<a href="">Reservations</a>
</li>
</ul>
</nav>
</header>
推荐阅读
- clock - I2C 从主时钟延长中恢复
- symfony - 如何在 @symfony/webpack-encore 上加载 vue-i18n-loader
- c# - 如何正确暴露内部控制的属性?
- ruby-on-rails - 如何在 Rails 控制器中创建线程?
- sql - 带有大量日期的 SQL 日期差异计数
- c# - 在可为空的属性上使用 Expression.NotEqual 方法构建表达式
- c++ - 指向 std::thread 的共享指针是一种不好的做法吗?
- powershell - Powershell 组成员资格 - 按 OU 过滤
- cryptography - 对于 nbit LFSR(特别是伽罗瓦算法),唯一 32 字节密钥的最大数量只能是 255 是否正确?
- aws-lambda - 使用 cognito 身份验证从 AWS dynamoDB 表中获取行