css - 您能否清除 CSS 宽度属性以便它使用 "width"HTML 属性？

Question

在我正在处理的 WordPress 网站上，父主题添加了 width: auto和 height: auto作为所有图像的默认样式。但是 WordPress 使用 width和 height用于设置通过所见即所得(即 <img src="/blah.png" width="320" height="160"> )添加的图像大小的 HTML 属性，这些样式会覆盖它。在不触及父主题的情况下，最好是在没有 JavaScript 的情况下，有没有办法保留使用通过所见即所得设置的大小的行为？我试过了 width: inherit , width: initial , 和 width: unset ，一切都无济于事。

Answer 1

Without touching the parent theme, and ideally without JavaScript, is there a way to preserve that behavior of using the size set through the WYSIWYG?

不是我能想到的。但是这里有一个使用 JavaScript 的解决方案，它将 width 和 height CSS 内联设置为等同于 WP 集的属性。

var imgs = document.getElementsByTagName('img');

Object.values(imgs).forEach((el) => {
  elWidth = el.getAttribute('width');
  elHeight = el.getAttribute('height');
  el.style.width = `${elWidth}px`;
  el.style.height = `${elHeight}px`;
});

img {
  width: auto;
  height: auto;
}

<img src="https://via.placeholder.com/800x800" width="200" height="200" />
<img src="https://via.placeholder.com/400x400" width="200" height="200" />