我有4列.第1列和第4列的实际内容为150px,第2列为250px,第3列为370px.我希望在浏览器宽度更改时包装列.当我减小浏览器的宽度时,我希望每个列在包装之前缩小到它们的最小宽度.所以我想第4列会在宽度低于150px之后落到下一行,宽度为100%.
这就是我认为应该做的诀窍:
repeat(auto-fit, minmax(max-content, 1fr))
有没有办法实现这一点,而不通过固定宽度'max-content'？
这是我使用媒体查询和硬宽度的解决方案
https://jsfiddle.net/9hjb5qv8/
这是我在上面的小提琴中使用的html/css:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
grid-gap: 8px;
}
@media (max-width: 799px) {
.container {
grid-template-columns: minmax(max-content, 1fr);
}
}
@media (min-width: 800px) {
.container .p2,
.container .p3 {
grid-column: auto / span 2;
}
}
.container > div {
background-color: gray;
text-align: center;
}<div class="container">
<div class="p1">
<img src="https://via.placeholder.com/150x150">
</div>
<div class="p2">
<img src="https://via.placeholder.com/250x150">
</div>
<div class="p3">
<img src="https://via.placeholder.com/370x150">
</div>
<div class="p4">
<img src="https://via.placeholder.com/150x150">
</div>
</div>当我尝试在鼠标悬停时缩放div时,文本会抖动/抖动并且动画不平滑.这在FireFox中尤其明显,但也可以在Chrome中看到.
我可以做些什么改变来使动画流畅吗？
JS小提琴:https://jsfiddle.net/jL4dbxf9/
.mtw {
max-width: 200px;
margin: 0 auto;
}
.mt .mp {
text-align: center;
}
.mt .mp .ma {
color: #fff;
font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
min-height: 60px;
}
.mt .header-blue {
background: blue;
}
.mt {
transition: all 0.4s linear;
}
.mt:hover{
z-index: 1;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}<div class="mtw">
<div class="mt">
<div class="header-blue">
<h2 class="mp">
<span class="ma">49</span>
</h2>
</div>
</div>
</div>我刚刚开始使用 Bulma ( bulma.io ) 并希望将此图像调整为导航栏高度，我认为默认情况下它是 3.25rem（16px 基本字体大小），但事实并非如此。
我已经尝试将图像大小调整为 600px x 140px 没有运气，我在谷歌上搜索了很多但仍然无法修复它。但是，如果我使用 600px x 140px 的示例 bulma 图像，它可以工作吗？这是使用 bulma 图像的代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
</nav>我的代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="https://preview.ibb.co/bVUFKU/logo_transparent.png" alt="logo_transparent">
</a>
</div>
</nav>