Учусь делать верстку, хочу натянуть ее на laravel сделать для себя блог от начала до конца и научиться верстке работе с фреймворком итд. Использую чистый CSS Через пред процессор. И вот загвоздка, сделал обтекаемою картинку но если мало текста то она выходит за границу блока, как масштабировать картинку по высоте блока и так сделать чтобы картинка растягивала блок а не выпадала из него, еще не выбрал что лучше будит смотреться, но для обучения нужно разобраться с двумя решениями.
#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 Весь проект