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

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; is valid, but isn't the default. The default width for a table is 100%, whereas width:auto; will make the element only take up as much width as it needs to.

min-width:auto; isn't allowed. If you set min-width, it must have a value, but setting it to zero is probably as good as resetting it to default.

---

Well, display: none; will not display the table at all, try display: inline-block; with the width and min-width declarations remaining 'auto'.

---

I ended up using Javascript to perfect everything.

My JS fiddle: 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); 
    }
})

---

The best way that I've found to revert a min-width setting is:

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

unset is in the spec, but some browsers (IE 10) do not respect it, so 0 is a good fallback in most cases. min-width: 0;

참고URL : https://stackoverflow.com/questions/5091357/override-and-reset-css-style-auto-or-none-dont-work