Responsive images (jquery)

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 without jquery see:<br/>
<a href="https://jsfiddle.net/jmeile/bo815d49/170" 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 */
  float: left;
  margin-top: 10px;
}

.jmpeople_pic img {
  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;
}

JavaScript

$(document).ready( function () {
  /* In order to calculate the equivalence in em units, I use the formula:
   * em-height = px-height / font-size
   */
  var div_height = $('.jmpeople_address_container').height();
  
  // em units are relative to the font-size of the parent
  var div_font_size = parseFloat($('.jmpeople_pic').css('font-size'));
  
  var em_height = (div_height / div_font_size);
  var em_height_str = em_height + 'em';
  var image = $('.jmpeople_pic img');
  image.height(em_height_str);
} );