Defff

Скриптовый Вариант:

<style>
.wrapper__image {
  background: #fbfbfb;
  margin: 50px;
  display: inline-block;
  width: 270px;
  height: 420px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 10px 20px 70px -18px rgba(0, 36, 100, 0.12);
}
.wrapper__image img:not(.longwidth) {
    width: 100%;
    height:auto;
}
.wrapper__image img.longwidth {
    height: 100%;
    width:  auto;
}
</style>
<script type="text/javascript">
function isLongWidth (that){
  if(that.width>that.height)that.className = "longwidth";
}
</script>
<div class="wrapper__image"><img src="https://d13yacurqjgara.cloudfront.net/users/182238/screenshots/2604379/12-fire.jpg" onload="isLongWidth(this)"></div>

Ps: Для корректной работы в ИЕ 6-7 правильнее перенести .interval вместе с оберткой в начало списка

      <div class="route">
      <div class="intervalAll">
        <div class="interval"></div>
        <div class="interval" style="width:278px;border-color:green;background:#aaa"></div>
      </div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>

      </div>

Добавьте общую обертку

      <div class="route">
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
      <div class="intervalAll">
        <div class="interval"></div>
        <div class="interval" style="width:278px;border-color:green;background:#aaa"></div>
      </div>
      </div>

Для неё пропишите:

.intervalAll {
     position:absolute;
}

Образчик => hostjs-mybb2011.narod.ru/Buble.htm

В jQuery правильнее так:

$(document).ready(function(){
 $("li").mouseenter(function(){
      $( i,this).css({"background-image": "url(assets/blue-icon.png)"});
    }).mouseleave(function(){
      $( i,this).css({"background-image": "url(assets/white-icon.png)"});
    });
});

Hover — трясёт при наведении на краях

Простая денежная идея — изготовление табличек интерактивно:
Задаём исходные колво строк в таблице и ячеек в строке,
Далее растягиваем ячейку мышкой на нужное кол-во row и span( каждая редактируемая ячейка полупрозрачна(видны нижнее основание с первичной разметкой и обладает собственным цветом, при отпускании мышки нижний угол выравнивается по углу ближайшей ячейки. Новая редактируема ячейка — с новым цветом полупрозрачности, итоговая табличка оплачиваяецо по смс и пользователь получает код таблички(с сервера) и бонус на создание второй — бесплатно!
Да — заготовка/редактирование таблички идёт в div или канвас, посколь такой промежуточный код не имеет ценности для попутных краж.