Cover image with dynamic height CSS - html

Question

I am trying to find solution for the problem.
I have following block
As you can image takes more space than content. But in general image looks nice.
I want to get the same behavior but to crop/cover image according to the text size. Currently this block doesn't have fixed height. So I guess it is impossible to get desired result without fixed height.
My html
<article id="post-313" class="col-md-12 l-post post post--short post-type--post">
<div class="l-post-thumbnail col-md-4 col-xs-12">
<div class="post-thumbnail">
<img src="http://martinsolutionsrd.com/wp-content/uploads/2016/05/para1.png" alt="Image for Remove all comments from your project" class="post-thumbnail__image">
</div>
</div>
<div class="l-post-description col-md-8 col-xs-12">
<div class="post-description">
<div class="post-title">
<h3 class="post-title__header">
<a class="post-title__link" href="#">Remove all comments from your project</a>
</h3>
</div>
<div class="post-meta">
<a href="#" class="post-meta__link is-first-item">
<span class="post-meta__icon fa fa-user"></span>
CROSP
</a>
<a href="#" class="post-meta__link">
<span class="post-meta__icon fa fa-calendar"></span>
June 27, 2016
</a>
<a href="#" class="post-meta__link">
<span class="post-meta__icon fa fa-comment"></span>
2
Comments
</a>
</div>
<div class="post-content">
<p class="post-content__text">
Sometimes you need to do such weird things like remove all comments from your project.
This may mean that you have reached the highest level of writing code, so no one need comments to understand written in the source files. Sometimes you need to do such weird things like remove all comments from your project.
This may mean that you have reached the highest level of writing code, so no one need comments to understand written in the source files.
</p>
</div>
<div class="post-footer">
<div class="post-categories">
<div class="post-categories__links-wrapper">
<span class="post-categories__icon fa fa-folder-open"></span>
<a href="http://crosp.net/category/software-development/regex/" class="post-categories__link is-last-item">
Regex
</a>
</div>
</div><!-- Inline block fix width
--><div class="post-more">
Read More
</div>
</div>
</div>
</div>
</article>
My CSS
/* Post module */
.l-post {
margin-bottom: 1.875em;
padding: 0 !important; }
#media only screen and (max-width: 560px) {
.l-post.post--short {
padding-right: 0;
padding-left: 0; } }
.l-post-thumbnail {
padding: 0;
margin: 0; }
/* Post content */
#media only screen and (max-width: 560px) {
#main-content {
padding: 0; } }
.l-sidebar {
margin-bottom: 2.5em; }
.l-header {
height: 90%;
width: 100%; }
#media only screen and (max-width: 560px) {
.l-header {
height: 100%; } }
#media only screen and (min-width: 1440px) {
.l-header {
height: 60%; } }
#media only screen and (min-width: 1600px) {
.l-header {
height: 40%; } }
.l-header-content {
font-size: 1.6rem;
display: table;
width: 100%;
position: relative; }
.l-header-content .header-content__wrapper {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle; }
.l-footer {
position: relative;
padding: 3rem 0;
background-color: #081c24; }
.l-footer .social-icons {
padding-right: 1.875em;
text-align: right; }
#media only screen and (max-width: 992px) {
.l-footer .social-icons {
display: block;
margin: 2rem 0;
text-align: center; } }
.l-footer .copyright {
text-align: left; }
#media only screen and (max-width: 992px) {
.l-footer .copyright {
text-align: center;
display: block; } }
.l-blog-pagination {
text-align: center; }
.l-search-form {
width: 100%; }
.l-search-form .search-form__input {
width: 50%; }
#media only screen and (max-width: 480px) {
.l-search-form .search-form__input {
display: block;
width: 70%;
margin: 0 auto; } }
#media only screen and (max-width: 480px) {
.l-search-form .search-form__submit {
margin: 0.625em auto;
display: block; } }
/* Post module */
.post {
overflow: hidden;
background-color: #fff;
border: 1px solid #c8c8c8;
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.19), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.19), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.19), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
/* Image submodule */
/* Title submodule */
/* Content submodule */
/* Meta submodule */
/* Footer submodule */
/* Description submodule */
/* Categories submodule */
/* More submodule */
/* States */ }
.post-thumbnail {
overflow: hidden;
height: 100%; }
.post-thumbnail__image {
max-width: 150%;
width: 140%;
height: auto; }
.post-title {
display: block;
margin-bottom: 0.625em;
margin-top: 0.9375em; }
.post-title__header {
color: #52b3d9;
font-weight: 700; }
.post-title__link {
color: #337ab7; }
.post-content {
line-height: 1.4; }
.post-meta {
margin: 0.5625em 0;
color: #68c3a3; }
.post-meta__link {
white-space: nowrap;
margin-right: 0.75em;
color: #797e83; }
.post-meta__link:hover {
color: #52b3d9; }
.post-meta__icon {
font-size: 1.25em;
margin-right: 0.2em; }
.post-footer {
width: 100%;
padding: 0;
margin-top: 1.25em; }
.post-description {
padding: 0.3125em 1.5625em 1.5625em 0.625em; }
#media only screen and (max-width: 560px) {
.post-description {
padding-left: 0.3125em;
padding-right: 0.3125em; } }
.post-categories {
margin: 0;
width: 60%;
word-wrap: break-word;
vertical-align: middle;
display: inline-block; }
#media only screen and (max-width: 768px) {
.post-categories {
width: 100%;
display: block; } }
.post-categories__link {
color: #797e83; }
.post-categories__link:hover {
color: #52b3d9; }
.post-categories__link::after {
content: "/"; }
.post-categories__link.is-last-item::after {
content: ""; }
.post-categories__icon {
display: inline-block;
color: #797e83;
margin-right: 0.25em;
font-size: 1.25em; }
.post-categories__links-wrapper {
vertical-align: middle;
display: inline-block; }
.post-more {
margin: 0;
width: 40%;
display: inline-block;
text-align: right; }
#media only screen and (max-width: 768px) {
.post-more {
margin-top: 1.5rem;
width: 100%;
display: block;
text-align: center; } }
.post:hover {
-moz-box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.19), 0 5px 17px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.19), 0 5px 17px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.19), 0 5px 17px 0 rgba(0, 0, 0, 0.19); }
/* Post info module used in header mostly */
.post-info {
text-align: center;
padding: 1.25em 1.25em; }
.post-info__header {
text-align: center;
font-size: 1.375em;
color: #f7f7f7;
background-color: rgba(48, 56, 67, 0.6);
border: 1px solid #6e6e6e;
border-radius: 10px;
padding: 0.45455em 1.13636em;
display: inline-block;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s; }
.post-info__header:hover {
border: 1px solid #52b3d9; }
#media only screen and (max-width: 560px) {
.post-info__header {
padding: 0.45455em 0.68182em; } }
.post-info__date-link {
color: #52b3d9; }
.post-info__date-link:visited, .post-info__date-link:active, .post-info__date-link:focus {
color: #52b3d9; }
.post-info__date-link:hover {
color: #68c3a3; }
.post-info__category-link {
color: #52b3d9; }
.post-info__category-link:visited, .post-info__category-link:active, .post-info__category-link:focus {
color: #52b3d9; }
.post-info__category-link:hover {
color: #68c3a3; }
You can find working example (open in fullscreen) JSFiddle
I tried to set fixed height, and set image properties to
&__image {
width: auto;
height: 100%;
}
But it produces following result. As you can see only top left part is visible.
I have only idea to make image absolute and set width and height to 120%, for instance in order to cover image. But I am not really want to make images absolute positions (get of normal flow).
Please suggest the best solution to get desired and nice looking result.
Thanks.
UPDATE
I am not big fan of bootstrap components, so I use only grid.
I am looking for pure css solution.

Answer 1

As you're using bootstrap, you should use bootstap's default Media object. Best solution. Check their documentation here : http://getbootstrap.com/components/#media
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>

Answer 2

Not sure if you mean that you want the image to have an equal height as the text div, but I made an equalHeight function for you in jsfiddle https://jsfiddle.net/ux6k02g9/3/
let me know if this is what you mean :-)
jquery code:
$(document).ready(function(){
if ($(window).width() >= 1){
equalHeight();
}
});
$(window).resize(function(){
if ($(window).width() >= 1){
equalHeight();
}
});
function equalHeight()
{
var tallest = 0;
$('.l-post-description').each(function() {
/*if ($(this).find('.article-text').height() > tallest) {
tallest = $(this).height();
} */
if($(this).height() > tallest){
tallest = $(this).height();
}
//$(this).find('.col .item').css('min-height', tallest + 'px');
});
console.log(tallest);
$('.post-thumbnail__image').css('height', tallest + 'px');
}
$(document).ready(function(){
if ($(window).width() >= 1){
equalHeightt();
}
});
$(window).resize(function(){
if ($(window).width() >= 1){
equalHeightt();
}
});

Answer 3

This is best done with just CSS and as little DOM as possible.
My favorite trick is to put the after element next to the siblings, adding dipslay: flex to the parent. Now set width: 200% for both children and left: -50% for :: after.
body{
overflow-x: hidden;
}
.gradient, .gradient img {
width: 200%;
height: clamp(20rem, 70vw, 60rem);
margin: 0;
overflow: hidden;
}
.gradient{
display: flex;
}
.gradient::after{
pointer-events: none;
content: "";
height: inherit;
object-fit: cover;
width: inherit;
display: block;
background: linear-gradient(180deg, #336b25, #aa9210 41.07%, #aa2f10 76.05%);
mix-blend-mode: screen;
position: relative;
top: 0;
left: -50%;
z-index: 3;
}
<div class="gradient">
<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"/>
</div>