Question

假设我有这样的代码：

＆＃13;

img {
  width: auto;
}

＆＃13;

<img src="blah.jpg" width="400">

＆＃13;

让我们说blah.jpg宽1000px。 HTML代码来自第三方软件，因此我无法更改它。（但我可以用CSS选择它。）

我希望将图像显示为在img-tag中声明的宽度，但我无法删除CSS width: auto。

但我可以用我想要的任何东西覆盖这个CSS规则。

编辑以某种方式可以显示图片标签中定义的宽度=宽度的图片吗？

Answer 1

更新：

HTML img-Tag是使用第三方软件生成的

是否可以以某种方式显示图像标签中定义的宽度=宽度的图像？

不能使用CSS。

OLD回答

是的，它正在使用max-width

不要使用width HTML标记，也不要使用内联样式

img {
  width: auto;
  max-width: 400px;
}

<img src="//lorempixel.com/1000/200">

可悲的是，我不知道CSS文件中图像的宽度。所以我可以未将宽度或最大宽度设置为400

这就是类和ID的用途（如果你不知道如何使用新的CSS 3选择器）

所以申请一个类，只需将max-width设置为该类，如下所示：

img {
  width: auto
}
.w400 {
  max-width: 400px
}

<img class="w400" src="//lorempixel.com/1000/200">

<img src="//lorempixel.com/1000/200">

Answer 2

我不认为这可以通过CSS实现。我当然无法想办法。

您可以创建一个非常简单的javascript来为任何带有已定义width属性的img生成内联样式：

＆＃13;

var imgs = document.querySelectorAll('img[width]');

for (var i = 0; i < imgs.length; i++) {
  var widthAttr = imgs[i].getAttribute('width');
  imgs[i].style.width = widthAttr + 'px';
}

＆＃13;

img {
  width: auto;
}

＆＃13;

<img src="http://placehold.it/400x400" width="200">

<img src="http://placehold.it/400x400" width="300">

＆＃13;

Answer 3

您可以添加另一个样式类，并将其用于此图像，无论您要指定哪个高度和宽度值。这样，您可以保持现有的样式信息不变，并拥有更清晰的HTML。

<img width=""/> vs CSS宽度

3 个答案: