例如,我有一张 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变得简单?
最佳答案
如果您只想在网页上显示不同尺寸的图像,那么您的代码位于正确的路径上。
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 .
关于javascript - 如何在css(或html)中定义动态高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31904450/