CSSスタイルのオーバーライドとリセット：autoまたはnoneは機能しません

すべてのテーブルに定義されている次のCSSスタイルをオーバーライドしたいと思います。

table {
        font-size: 12px;
        width: 100%;
        min-width: 400px;
        display:inline-table;
    }

というクラスの特定のテーブルがあります'other'。
最後に、テーブルの装飾は次のようになります。

table.other {
    font-size: 12px;
}

私は3つのプロパティを削除する必要が：width、min-widthおよびdisplay

noneまたはautoでリセットしようとしましたが、助けにはなりませんでした。

table.other {
    width: auto;
    min-width: auto;
    display:auto;
}
table.other {
    width: none;
    min-width: none;
    display:none;
}

最初のプロパティセットが機能しない理由は、にauto値がないdisplayため、プロパティを無視する必要があるためです。その場合inline-tableでも、は有効になり、要素にwidthは適用されないためinline、その一連のプロパティは何もしません。

2番目のプロパティセットは、テーブルを単に非表示にするdisplay: noneためのものです。

table代わりにそれをリセットしてみてください：

table.other {
    width: auto;
    min-width: 0;
    display: table;
}

編集： min-widthデフォルトで0はなく、auto

"none"は、ユーザーが想定していることを実行しません。CSSプロパティを「クリア」するには、CSS標準で定義されているデフォルトに戻す必要があります。したがって、お気に入りのリファレンスでデフォルトを調べる必要があります。

table.other {
    width: auto;
    min-width: 0;
    display:table;
}

Set min-width: inherit /* Reset the min-width */

これを試して。それが動作します。

displayテーブルのデフォルトプロパティはdisplay:table;です。他の唯一の有用な値はinline-tableです。他のすべてのdisplay値は、テーブル要素には無効です。

これautoをデフォルトにリセットするオプションはありませんが、JavaScriptで作業している場合は、空の文字列に設定してトリックを実行できます。

width:auto;は有効ですが、デフォルトではありません。テーブルのデフォルトの幅はですが100%、width:auto;要素は必要なだけの幅を占めるようになります。

min-width:auto;許可されていません。を設定する場合min-widthは、値を指定する必要がありますが、ゼロに設定することは、デフォルトにリセットするのと同じくらい良いでしょう。

さて、display: none;テーブルをまったく表示しませんdisplay: inline-block;。widthおよびmin-width宣言を「auto」のままにしてみてください。

私はすべてを完璧にするためにJavascriptを使用することになりました。

私のJSフィドル：https：//jsfiddle.net/QEpJH/612/

HTML：

<div class="container">
    <img src="http://placekitten.com/240/300">
</div>

<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">

CSS：

.container {
    background-color:#000;
    width:100px;
    height:200px;

    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

}

JS：

$(".container").each(function(){
    var divH = $(this).height()
    var divW = $(this).width()
    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < (divW/divH)) { 
        $(this).addClass("1");
        var newW = $(this).width();
        var newH = (newW/imgW) * imgH;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    } else {
        $(this).addClass("2");
        var newH = $(this).height();
        var newW = (newH/imgH) * imgW;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    }
})

最小幅設定を元に戻すために私が見つけた最良の方法は次のとおりです。

min-width: 0;
min-width: unset;

unsetは仕様に含まれていますが、一部のブラウザー（IE 10）はそれを尊重しないため、ほとんどの場合0が適切なフォールバックです。最小幅：0;