我正在学习做布局，我想把它拉到 laravel 上，从头到尾为自己做一个博客，学习布局，使用框架等。我使用纯 CSS Via 预处理器。这里有一个问题，我做了一个流线图，但是如果没有足够的文字，那么它超出了块的边界，如何沿着块的高度缩放图像，使图片拉伸块并做到不要掉出来，我还没有选择看起来更好的东西，但是为了学习，你需要用两种解决方案来弄清楚。
#content {
margin-left: $widthMenu;
margin-right: $widthMenu;
min-height: 100vh;
.post {
background-color: #eee;
margin-bottom: 10px;
box-shadow: 0 0 3px #333;
border-radius: 3px;
//$Border
padding: 15px;
min-height: 50%;
font-family: cambria;
img {
//height:300px;
box-shadow: 0 0 3px #333;
margin: 10px;
float: left;
border: 7px solid #eee;
width: 50%;
vertical-align: top;
max-width: 250px;
}
.img {
box-shadow: 0 0 3px #333;
margin: 10px;
border: 7px solid #eee;
width: 100px;
;
height: 100px;
;
background-size: cover;
//max-width:250px;
vertical-align: top;
}
.title {
font-size: 27px;
color: #777;
text-shadow: 0 0 1px #333;
transition: 0.3s;
font-family: cambria;
&:hover {
text-shadow: 0 0 3px #333;
cursor: pointer;
}
}
p {
margin: 5px;
}
.postFutter {
margin-top: 7px;
text-align: right;
a {
color: #aaa;
}
}
}
}HTML
<div class='post'>
<a class="title">Кубизм</a>
<hr>
<img src="data/media/media3.jpg">
<!--div class = "img" style = "background-image: url('data/media/media3.jpg');" ><div-->
<p>
Took me two hours, got the 4 minute speedrun trophy under two seconds short of the limit after countless of restarts. Very satisfying once you finally succeed. For two dollars it's a fantastic game at a fantastic prize (on the US store, EU was 3€)
</p>
<hr>
<div class='postFutter'>
<a href="#">Коментарів (0) | </a>
<a>Дата: 21.06.2021</a>
</div>
</div>该解决方案在 css 中是可取 的整个项目
在“post”类的末尾添加另一个块，并给它一个像“clearfix”这样的类。然后添加样式：