Auto set inline block for child width when child image resizes
I have a slider filled with images in containers and each container has an inline display unit.
The main slider has a fixed width (eg 768 pixels) and an adjustable fixed height. I want the child images and its containers to fit this height and keep the aspect ratio of the image. When I dynamically change the height of the slider in developer tools or using Javascript, the image divs remain the same width and I have white space between each image in the row (images inside the containers are scaled and proportional).
I'm trying to:
.image{
display: inline-block;
width: auto;
height: 100%;
}
but the problem persists.
Is it possible to fix this with just CSS?
source to share
You need to force the .image element to resize it anyway, I think you need to use js
You can do it:
function reduceHeight() {
document.getElementById("container").style.height = 200 + "px";
$(".image").css('height', 200);
}
or
Js
function reduceHeight() {
document.getElementById("container").style.height = 200 + "px";
$("container").addClass('reduced');
}
CSS
.reduced .image{
height: 99%;
}
Anyway, I hope you accept this idea, just force it to resize by changing properties like padding, border, works too.
I hope this helps
source to share