Now that I’m not on mobile and can relay some code, here’s the code I use to achieve the aforementioned:
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
display: block;
margin: 0 auto;
width: auto;
}
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
max-height: 300px;
}
@media screen and (min-width: 525px) {
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
max-height: 400px;
}
}
@media screen and (min-width: 769px) {
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
max-height: 450px;
}
}
@media screen and (min-width: 1183px) {
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
max-height: 500px;
}
}
@media screen and (min-width: 1503px) {
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
max-height: 550px;
}
}
I just noticed that that code hasn’t been committed yet, and so while that means that it’s been in code injection for at least a couple of months now, I kinda forget if it’s in a final form or testing form or what. In other words, and without taking a closer look at it, some of the code may be superfluous and it’s probably still in “draft mode”. Meanwhile, I notice that I haven’t added a :not
conditional for full-width images, but as my theme has a side-panel and so can’t take advantage of full-width images I take it that that’s why I didn’t bother. Regardless, I’m sure you get the idea and can adjust things as you see fit, if you’re even interested in this methodology.