인라인 html 특성 "width=XX"로 되돌리기 위한 너비 설정 해제

인라인 html 특성 "width=XX"로 되돌리기 위한 너비 설정 해제

는 속성이 말하는 대로 (width=XX)그리고 CSS가 아닙니다.이것은 UI 드래그 코너를 사용하여 이미지 크기를 85 x 30으로 조정할 때 Wordpress Html 편집기가 설정하는 것입니다.하지만, 그 테마는 몇몇의 css를 가지고 있습니다.height/width:auto그것이 만드는 것입니다.img자연스러운 차원으로 이동하고 CSS를 '죽일' 방법을 찾을 수 없어 인라인으로 되돌립니다. (물론 테마 CSS를 편집하지 않고)

로 시도했습니다.width:unset그리고.inherit생각 있어요?아이디어 있어요?

/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */

img{
  width:unset  !important; /*doesn't work*/
  height:unset  !important; /*doesn't work*/
}

<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

속성을 추가하기만 하면 됩니다.srcset=""첫 번째 스타일을 적용하지 않고 추가한 스타일을 제거하려면 이미지에 추가합니다.▁only▁to▁css▁one다▁the▁keep것▁to▁property▁is니이입으로 유지하는 것입니다.auto 너비을 얻을 수 높이을 가질 수 (높이 또는 너비) (높이 또는 너비)를 수 있습니다.

저는 을 고로올값지것좋다니습이는정참하을바른으로 을 추천합니다.srcset그리고 그것을 비워두지 마세요.

/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */

<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

갱신하다

명확하게 하기 는, 추가설추려면하지, 정가을을 합니다.width:auto그리고.height:auto이미지의 속성에 지정된 값을 재정의합니다.

리고그.autovalue는 브라우저가 지정된 요소의 너비를 계산하고 선택한 다음 이미지가 원래 크기/기본 크기를 얻습니다.

다음 중 하나를 제거함으로써auto값(이 경우 너비)은 이미지 속성의 값을 다시 고려하고 다른 하나는 항상 자동이기 때문에 브라우저에 의해 계산되며, 이 경우 브라우저가 계산하는 동안 비율을 유지하지만 원하는 값을 지정할 수 있기 때문에 속성의 값에 적합합니다.

다음은 이를 보여주는 코드입니다.

.col img {
  height: auto;
}

.col2 img {
  height: 100px;
}

.col3 img {
  height: 300px; /* 300px will overribe the value in the attribute */
  width:auto; /* auto will override the attribute so the browser will calculate the width by keeping the ratio of the image*/
}

<div class="col">
  <img width="85" height="30" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>

<div class="col">
  <!-- specify a big height value here  -->
  <img width="85" height="300000" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>
<div class="col2">
  <!-- for this one the width is specified in attribute and height in CSS  -->
  <img width="85" height="300000" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>
<div class="col3">
  <img width="85" height="300000" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>

다음은 더 자세한 내용이 포함된 유사한 질문입니다.

HTML5 - IMG에서 너비와 높이를 사용할 수 있습니까?

자바스크립트를할 수 자바스크립트의 할 수 .width그리고.height인라인 스타일의 속성입니다.

var img = document.querySelector('.row .col img:not([srcset])');

img.style.width = img.getAttribute('width')+'px';
img.style.height = img.getAttribute('height')+'px';

/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */

<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

편집:

많은 성찰 끝에 진짜 답은 CSS 답이 없다는 것입니다.이것은 어떤 CSS를 사용할지의 문제가 아니라 우선 순위의 문제입니다.
사용되는 값의 실제 프로세스는 다음과 같습니다.

• 기본값 사용
• 속성 값이 있습니까?사용 가능한 경우
• 명시적인 CSS가 있습니까?만약 그렇다면, 그것을 사용하세요.

그리고 이것은 CSS의 특수성과는 아무런 관련이 없습니다.따라서 기본값이width이라auto로 설정auto스타일시트에서 모양이 변경됩니다.

참고로 속성이 동등한 다른 CSS 속성도 마찬가지입니다. 를예들어,어들▁as,text-align은 " 값은다같다니습과음기본다"입니다.start그 말은 둘 중 하나를 의미합니다.left또는right상황에 따라이 코드가 있으면 다음과 같습니다.

<p align="center">This is some html</p>

이 " 값인경에도우기본도"인 text-align이라start속성 때문에 여전히 중심이 됩니다., 만약 이 설경우할정나를 text-align 스타일시트에서 속성이 속성을 재정의하고 정렬된 상태로 유지됩니다.

p {text-align:start}

<p align="center">This is some html</p>

따라서 마지막으로 스타일시트를 재설정하여 기본 모양을 변경하지 않으려면 해당 스타일시트에서 해당 스타일을 제거하는 것이 해결책입니다.새 CSS로 재설정할 수 없습니다!

저는 그 문제를 발견했기 때문에 이 토론에 추가하고 싶습니다.

위에 언급된 모든 것은 사실입니다.은 더 이 어떻게 해야 하는지를 .width그리고.height특성. 하기 위해 값을 하는 "측면 을 만들기 "합니다.이제는 너비와 높이를 결정하기 위해 HTML 값을 준수할 필요가 없지만 CSS의 최종 치수를 결정하는 "측면 비율"을 만들기 위해 "힌트"로 사용합니다.CSS를 변경하면 해당 치수는 이미지의 기본 너비와 높이로 돌아갑니다.브라우저는 속성, CSS 및 이미지 네이티브 차원을 모두 사용하여 원래 속성 값을 재정의하는 새 CSS 값을 통해 높이와 너비를 결정합니다.그래서 그 가치들은 이제 사라졌습니다.쳤어요!

HTML5의 이러한 변경에 대한 증거를 보려면 다음을 시도하십시오.

이미지 100 x 100 픽셀을 만들고 웹 페이지에 "img" 요소를 추가합니다.이제 다음과 같이 이미지의 너비 및 높이 속성에 500을 추가하여 500 x 500픽셀의 사용자 지정 값으로 크기를 조정합니다.

<img id="image1" src="/image.jpg" width="500" height="500" onclick="Javascript: alert(this.width);"  />

제가 추가한 Javascript 팝업 알림을 확인합니다.그러면 이미지 속성 값이 어떻게 되는지 증명할 수 있습니다.이제 브라우저에서 이미지 스타일을 "뒤로 되돌리거나" 재설정하는 스타일을 만듭니다.

    html body img {
        all: revert;
    }

이미지의 너비와 높이는 얼마입니까?Javascript 알림 상자 이벤트가 있는 이미지를 클릭합니다.팝업에 "100"이 표시되며, 이미지 기본 너비는 속성 너비가 아닙니다.더 이상 속성에 설정한 500픽셀이 아닙니다. 왜죠?

새로운 HTML5 표준은 공급업체들에게 더 이상 너비와 높이 특성을 존중하지 말고 먼저 가로 세로 비율을 기반으로 새로운 너비와 높이를 "계산"한 다음 메모리에서 너비와 높이를 CSS로 생성하도록 요청했습니다.제가 "all:revert"를 사용하여 스타일을 재설정했을 때, 저는 HTML 속성을 덮어쓰는 계산된 값을 파괴하여 자바스크립트조차도 잘못된 값을 끌어냅니다!하지만 브라우저는 img 속성의 너비와 높이를 지웠습니다.그래서 사라졌습니다!

즉, 해석된 대로 원래 너비 및 높이 특성 값을 검색할 수 없습니다.HTML5의 브라우저가 이를 제거하고 CSS 사용자 지정 값으로 다시 해석했습니다.이것이 제가 더 이상 표준이 없기 때문에 새로운 WHATSWG 표준 기구보다 오래된 W3C를 신뢰하는 이유입니다.그들은 문서에서 다음과 같이 말합니다.

"차원 속성은 이미지를 확장하는 데 사용되지 않습니다."

이미지는 전통적으로 수년 동안 그렇게 해왔습니다.그래서 이것은 이제 많은 웹사이트 이미지를 깨뜨립니다.이는 직관적이지 않고 사용자가 속성을 수행할 것으로 예상하는 방식을 반영하지 않는 변화하는 규칙 집합입니다.

그나저나... "데이터 폭" 및 "데이터 높이" 속성을 이미지에 추가한 다음 Javascript를 사용하여 실제 값을 "다시 적용"할 수 있습니다.그러나 최신 브라우저는 CSS 해석을 변경하면 속성이 아닌 이미지의 실제 너비와 높이로 계속 설정됩니다.

언급URL : https://stackoverflow.com/questions/47852934/unset-width-to-revert-back-to-inline-html-attribute-width-xx