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

Question

For example, I have an image of 100x100, and want to show it in DIVs of 100x100, 80x80, 50x50, 20x20.

so I have to define something like this in 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 
}

Is this normal? Is there any more elegant way to do this?

Or make the css simple?

You want the `div`s to show at one time on your page, or you want them to scale with screen size? — Michael Benjamin, Aug 09 '15 at 12:57
maybe one div on one page, or two divs on one page. dont scale — Sato, Aug 09 '15 at 13:01
Is this what you're looking for? http://jsfiddle.net/0q527ush/ .. — Michael Benjamin, Aug 09 '15 at 13:04

score 0 · Accepted Answer · edited May 23 '17 at 12:08

If you just want to display an image at different sizes on your web page, your code is on the right path.

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

NOTE: Don't forget to define the correct width and height in each <img> tag.

For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. — Michael Benjamin, Dec 23 '16 at 18:56

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

1 Answers1