取消设置宽度以恢复为内联html属性“width = XX”

Question

我正在尝试将图像大小设置为(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>

Answer 1

只需将属性srcset=""添加到图像中即可避免应用第一个样式并删除您添加的样式。我们的想法是只保留一个CSS属性到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>

UPDATE

要添加更多说明，请指定width:auto和height:auto覆盖图像属性中指定的值。

并且auto值表示浏览器将计算并选择指定元素的宽度。然后图像将获得它的原始/默认大小。

通过删除其中一个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 - Can I use Width and Height in IMG?

Answer 2

如果可以使用JavaScript，则可以将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属性也是如此。举个例子，拿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重置重置！