I've got a container for image and img inside.
Is there some way to change the img content if it's width becomes bigger than the container width via css? Maby image-set?
nav{;
width: 100%;
padding: 0;
height:70px;
display: flex;
position: relative;
border-bottom: 1px solid #b8bbc0;
}
.logo-container{
display: inline-block;
overflow: hidden;
max-width: 25%;
flex: 0 0 25%;
-ms-flex: 0 0 25%;
padding: 5px 0;
margin: 5px 5px 5px 0;
position: absolute;
left: 5px;
}
.logo-helper{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.logo-container img{
max-height:40px;
margin: 5px;
display: inline-block;
content: url(https://wilcity.com/wp-content/uploads/2018/12/sample-logo-design-png-3.png);
}
<nav>
<div class="logo-container">
<span class="helper"></span>
<img>
</div>
</nav>
You cannot conditionally set any property in CSS because it is not a programming language. You can do this in JavaScript.
}