css优先：只重写高度和宽度中的一个

我想写一些CSS来为图像设置一个默认的高度和宽度，在任何给定的情况下可能会被其他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×30，和i2在显示80×40冷却。这工作正常。

但后来我碰到这种情况：

.bar img { width: 100px; } 

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

所以，现在我得到“的.bar IMG”，即100，宽度而是从” .imgsize_60x30" 的高度，即30和图像出来扭曲。当一个类指定宽度时，我希望浏览器继续并计算高度。但是，当我既没有宽度也没有高度时，我想要应用我的默认值。

当然，如果我没有把类=“imgsize_60x30”放在img标签上，它就可以正常工作。但问题在于，页面是基于来自数据库的许多代码和数据动态构建的，因此找出可能应用于任何给定标记的CSS将需要我重新发明CSS用于应用样式的所有逻辑 - 我不得不解析我们生成的所有HTML，找到所有类的引用，解析CSS，应用优先规则等等。所以我试图做的只是在某些图像上放置某些类，以使它们具有这些默认大小。

有没有什么办法可以在CSS中说：“如果你没有其他地方的高度或宽度，使用这个高度和宽度，如果你确实有其他地方的高度和宽度，你有” ？

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

来源

2016-12-30 Jay

我不知道这正是你在找什么，但如果你把height: auto内.bar img - 图像将保持它的比例：

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

这里是一个工作片段：

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

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

它是否解决问题了吗？

来源

2016-12-30 20:38:47 Dekel

哦，那有效。我可能不得不改变一堆样式来添加“自动”，但这是一个很痛苦的解决方案，但这种方法通常比简单但不起作用的解决方案更好。 :-) – Jay

最大的问题是，如果一个元素已经通过其他选择器获得了一些其他的css值，那么你不能真正问（使用css），所以我们必须在这里使用'auto'。 – Dekel

“不能问”是的，那是我摔跤的问题。 – Jay

css优先：只重写高度和宽度中的一个

回答

相关问题