Question

我试图将图片大小设置为属性(width=XX)而不是CSS。当您使用UI拖动角将图像大小调整为85 x 30时，这就是Wordpress Html编辑器设置的内容。但是，主题有一些css height/width:auto，这使img转到它＃39;自然尺寸，我无法找到一种方法来杀死＆＃39;那个CSS所以它恢复到内联一个。（当然没有编辑主题CSS）

我尝试使用width:unset和inherit无济于事。有任何想法吗？

＆＃13;

/* 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*/
}

＆＃13;

<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>

＆＃13;

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>

更新

要添加更多说明，请指定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

If you can use JavaScript, you can copy the values of the width and height attributes to an inline style.

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>

Edit:

After a lot of introspection, the real answer is that there is no CSS answer. This is not an issue of what CSS to use, but one of precedence.
The actual process of what value is used goes like this:

Take the default value
Is there an attribute value? If so, use it
Is there any explicit CSS? If so, use that.

and this has nothing to do with CSS specificity. So even if the default value of width is auto, setting it to auto in the stylesheet does change the appearance.

The same, by the way, is true of other CSS properties that have attribute equivalents. As an example, take text-align. Its default value is start, which means either left or right depending on the circumstances. So if you have this code:

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

even if the default value of text-align is start, it will still be centered, because of the attribute. However, if you set text-align explicitly in your stylesheet, the property will override the attribute and it will be left aligned after all.

p {text-align:start}

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

So at the end of the day, if you don't want a reset stylesheet to change your default appearance, the solution is to remove those styles from the reset stylesheet. You cannot reset the reset with new CSS!

Answer 3

当我发现问题时，我想加入这个讨论。

以上所说的都是真的。但是现代浏览器在 HTML5 中所做的不再像以前那样工作，因为它们改变了浏览器解释 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 属性的计算值，因此即使 Javascript 也会提取错误的值！但是浏览器抹掉了img属性width和height。就这样没了！

换句话说，您无法检索已解释的原始宽度和高度属性值。 HTML5 中的浏览器已将其删除并将其重新解释为 CSS 自定义值。这就是为什么我会相信旧的 W3C 而不是新的 WHATSWG 标准机构，因为不再有标准。他们在文档中说：

“尺寸属性不能用于拉伸图像”。

图像传统上已经这样做了多年。所以这现在打破了许多网站图片。它是一组不断变化的规则，不直观，也不能反映用户期望属性如何执行。

顺便说一句......你可以绕过这个“错误”，购买向你的图像添加“数据宽度”和“数据高度”属性，然后使用Javascript再次“重新应用”真实值。但是现代浏览器仍然会尝试默认图像的实际宽度和高度，而不是属性，如果你改变它们的 CSS 解释。

取消设置宽度以恢复为内联html属性＆＃34; width = XX＆＃34;

3 个答案: