當孩子調整高度時，內聯塊自動適合子寬度

Question

我有滑塊填充容器中的圖像，每個容器都顯示內聯塊。

主滑塊具有固定寬度（例如768px）和可調節的固定高度。 我希望兒童圖像及其容器適合該高度，並保持圖像比例。 當我在開發人員工具中或使用Javascript動態更改主滑塊高度時，圖像容器div保持相同的寬度，並且我在每個圖像之間有一些空的空間（容器內的圖像被縮放並保持縱橫比）。

我試着用：

.image{
    display: inline-block;
    width: auto;
    height: 100%;
}

但問題仍然存在。

我能用CSS修復它嗎？

小提琴

Answer 1

您必須強制.image元素在任何情況下重新計算其大小我認為您必須使用js

你可以這樣做：

function reduceHeight() {
    document.getElementById("container").style.height = 200 + "px";
    $(".image").css('height', 200);
}

要么：

JS

function reduceHeight() {
    document.getElementById("container").style.height = 200 + "px";
    $("container").addClass('reduced');
}

CSS

.reduced .image{
    height: 99%;
}

無論如何，我希望你接受這個想法，只是強迫它改變它的大小，改變填充，邊框，工作等屬性。

我希望這有幫助