如何在css（或html）中定义动态高度？

Question

例如，我有一个100x100的图像，并且想要以100x100,80x80,50x50,20x20的DIV显示它。

，所以我必须在CSS定义是这样的

.div_100 { 
    height: 100px; 
    width: 100px; 
    // other 
} 

.div_80 { 
    height: 80px; 
    width: 80px; 
    // other same 
} 

.div_50 { 
    height: 50px; 
    width: 50px; 
    // other same 
} 

.div_20 { 
    height: 20px; 
    width: 20px; 
    // other same 
} 

这是正常的吗？有没有更优雅的方式来做到这一点？

还是让css简单？

Answer 1

如果你只是想在你的网页上显示不同大小的图片，你的代码是在正确的道路上。

http://jsfiddle.net/0q527ush/

HTML

<div class="div_100">IMAGE</div> 
<div class="div_80">IMAGE</div> 
<div class="div_50">IMAGE</div> 
<div class="div_20"></div> 

CSS

div { 
    border: 2px dashed black; 
    margin: 10px; 
    background-color: #ccc; 
    text-align: center; 
} 

.div_100 { 
    height: 100px; 
    width: 100px; 
} 

.div_80 { 
    height: 80px; 
    width: 80px; 
} 

.div_50 { 
    height: 50px; 
    width: 50px; 
    font-size: .8em; 
} 

.div_20 { 
    height: 20px; 
    width: 20px; 
} 

注：不要忘记define the correct width and height in each <img> tag。