Question

我正在尝试编写一些设置图像默认高度和宽度的CSS，在任何给定的情况下都可能被其他CSS覆盖。例如：

样式表：

.imgsize_60x30 { width: 60px; height: 30px; }
.foo img { width: 80px; height: 40px; }

HTML：

<html>
<img id="i1" class="imgsize_60x30" src="myimage.png">
<div class="foo">
  <img id="i2" class="imgsize_60x30" src="myimage.png">
</div>
</html>

所以i1显示为60 x 30，i2显示为80 x 40.酷。这很好。

但后来我遇到了这种情况：

.bar img { width: 100px; }

<div class="bar">
    <img id="i3" class="imgsize_60x30" src="myimage.png">
</div>

所以现在我从“.bar img”获得宽度，即100，但是从“.imgsize_60x30”开始的高度，即30，并且图像变形失真。当一个类指定宽度时，我希望浏览器继续并计算高度。但是当我既没有宽度也没有高度时，我希望我的默认值适用。

当然如果我没有在img标签上放置class =“imgsize_60x30”，那么它可以正常工作。但问题是页面是基于多行代码和数据库中的数据动态构建的，因此弄清楚CSS可能适用于任何给定标记需要我几乎重新发明CSS用于应用样式的所有逻辑 - 我必须解析所有生成的HTML，查找所有类引用，解析CSS，应用优先级规则等等。所以我试图做的只是总是将某些类放在某些图像上以给它们这些默认大小

在CSS中有没有办法说，“如果你没有其他地方的高度或宽度，请使用这个高度和宽度。如果你有其他地方的高度和宽度，请使用你的“有”吗？

程序是在VB.NET中，所以如果代码中有一种方法可以说“嘿，这个元素的高度是多少？”，那就更好了。但据我所知，除了内联样式之外，没有办法在VB代码中询问哪些CSS样式将应用于元素。

Answer 1

我不确定这正是您要找的内容，但是如果您将height: auto放在.bar img内 - 图片会保持它的比例：

.bar img { 
    width: 100px; height: auto;
}

这是一个工作片段：

＆＃13;

.imgsize_60x30 { width: 60px; height: 30px; }
.foo img { width: 80px; height: 40px; }
.bar img { width: 100px; height: auto;}
.bar1 img { width: 100px;}

＆＃13;

<img id="i1" class="imgsize_60x30" src="https://dummyimage.com/60x30/s7e/ffe">
<div class="foo">
  <img id="i2" class="imgsize_60x30" src="https://dummyimage.com/60x30/s7e/ffe">
</div>
<div class="bar">
    <img id="i3" class="imgsize_60x30" src="https://dummyimage.com/60x30/s7e/ffe">
</div>

<div class="bar1">
  no auto height:<br />
    <img id="i3" class="imgsize_60x30" src="https://dummyimage.com/60x30/s7e/ffe">
</div>

＆＃13;

它能解决你的问题吗？

css优先级：仅覆盖高度和宽度

1 个答案: