如何在css(或html)中定义动态高度

How to define dynamic height in css (or html)?

本文关键字：定义 动态 高度 html css      更新时间：2023-09-26

例如，我有一张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简单?

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

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

注意:不要忘记在每个<img>标签中定义正确的width和height。

相关文章：