Responsive images (css)

Zoom and see how it works

by jmeile

HTML

Use the browser zoom function and you will see how the image size will be<br/>
adapted accordingly. Off course, the image will be pixelated because<br/>
it's original size is really small. In order to prevent this, you will<br/>
have to use a larger image.<br/>
For a css version see:<br/>
<a href="https://jsfiddle.net/jmeile/xbodp178/44" target="_blank">CSS version</a>
<br/><br/>
<div class="jmpeople_basic_data">
  <h2>Kunz, Andreas</h2>
  <h2>Prof. Dr. habil. / Adjunct Professor BTH</h2>
  <b class="jm-cat-text">Head icvr</b><br>
  <div class="jmpeople_pic">
    <img alt="Kunz, Andreas, Prof. Dr. habil. / Adjunct Professor BTH" src="https://db.iwf.ethz.ch/ConfiguratorJM/people/Kunz_Andre_119367856395052/ak_2012.jpg">
  </div>
  <div class="jmpeople_address_container">
    
      <h2>Adresse</h2>
      <div class="jmpeople_address">
        ETH Zurich<br>Mr. Prof. Dr. Andreas Kunz<br>Innovation Center Virtual Reality<br><a target="_blank" href="http://www.mapsearch.ethz.ch/map.do?farbcode=c000&amp;gebaeudeMap=LEE" class="eth-link printlink">LEE<span class="icon"></span></a> <a target="_blank" href="http://www.rauminfo.ethz.ch/Rauminfo/grundrissplan.gif?gebaeude=LEE&amp;geschoss=L&amp;raumNr=208" class="eth-link printlink">L&nbsp;208<span class="icon"></span></a><br>Leonhardstrasse 21<br>8092 Zurich<br>Switzerland
      </div>
    
  </div>
</div>

CSS

.jmpeople_basic_data h2,
.jmpeople_basic_data h4 {
  hyphens: none;
  margin: 0px;
  padding: 0px;
}

.jmpeople_basic_data h4 {
  margin-bottom: 15px;
}

.jmpeople_pic {
  /* This is the font-size I will use for converting em units to pixels */
  font-size: 1px;
  float: left;
  margin-top: 10px;
}

.jmpeople_pic img {
  width: 170px;
  /* I know in advanced that the size of the container div ".jmpeople_pic" is
   * 172px; I got this by taking an screenshot. So, in order to calculate the
   * equivalence in em units, I use the formula:
   * em-height = px-height / font-size, which translates to:
   * em-height = 172px / 1 px = 172em
   * Because the font-size is 1px, on this case em-height equals to px-height
   */
  height: 172em;
  /* The width will be automatically adjusted so that the image doesn't get
   * distorted
   */
  width: auto;
}

.jmpeople_address_container {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}

.jmpeople_address_container h2 {
  padding: 0px;
}

.jmpeople_address {
  font-size: 1.1rem;
  hyphens: none;
}

.jmpeople_additional_data {
  font-size: 1.25rem;
  clear: left;
}

.jmpeople_additional_data a:link,
.jmpeople_additional_data a:visited,
.jmpeople_additional_data a:active {
  color: #8C8C8C;
  text-decoration: none;
}

.jmpeople_additional_data a:hover {
  text-decoration: underline;
}

.jm-cat-text {
  margin-left: 2px;
  margin-bottom: 5px;
}