CSS 스타일 재정의 및 재설정 : 자동 또는 작동하지 않음

모든 테이블에 대해 정의 된 다음 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요소에 적용되지 않으므로 해당 속성 세트는 아무 것도 수행하지 않습니다.

두 번째 속성 집합은 단순히 테이블을 숨 깁니다 display: none.

table대신 재설정 해보십시오 .

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

편집 : min-width 기본값은 0아닌auto

"없음"은 사용자가하는 것을하지 않습니다. 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값은 테이블 요소에 유효하지 않습니다.

autoJavascript로 작업하는 경우 빈 문자열로 설정하면 트릭을 수행 할 수 있지만 기본값으로 재설정 하는 옵션 은 없습니다 .

width:auto;유효하지만 기본값이 아닙니다. 테이블의 기본 너비는 100%이며 width:auto;요소는 필요한만큼만 너비를 차지합니다.

min-width:auto;허용되지 않습니다. 을 설정 min-width하면 값이 있어야하지만 0으로 설정하면 기본값으로 재설정하는 것이 좋습니다.

글쎄, display: none;테이블을 전혀 표시하지 않을 것입니다 display: inline-block;.'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;