Блог

Я использую flexslider и помещаю img в div, который отображается как встроенный блок. Таким образом, я могу содержать другие элементы (кнопку при наведении курсора мыши) внутри того же div и позиционировать их относительно этого. Он работает, как и ожидалось, в Chrome, но в Mozilla изображение, похоже, игнорирует любые ограничения по высоте или ширине, установленные для его родительских элементов, и отображается в полном размере. Вот быстрый codepen, который имитирует проблему.
http://codepen.io/spylefkaditis/pen/HysBi

Опять же, это отлично работает в Chrome, но не в Mozilla. Есть идеи?

HTML:

 <ul>
  <li>
    <div class="image">
      <img src="http://lorempixel.com/1200/1800/" alt="" />
<!--      <a href="#" class="btn">button</a>
      <div class="modal">
        <p class="message"></p>
      </div>-->
    </div>
  </li>
</ul>  
  

SCSS:

 *{
  box-sizing:border-box;
}
html,body{
  height:100%;
  width:100%;
}

ul{
  margin:0;
  padding: 0;
  width: 100%;
  height:100%;
  list-style-type:none;


  li{
    display:inline-block;
    position:relative;
    height:100%;
    width: 100%;
    text-align:center;

    .image{
      position:relative;
      display:inline-block;
      text-align:center;

      img{
        display: inline-block;
        max-height:100%;
        width:auto;
      }
/*      
      .btn{
        position:absolute;
        left:0;
        bottom:0;
        background-color:black;
      }
      */
    }
  }
}
  

Вам нужно установить значение высоты для .image элемента следующим образом:

 .image{
  position:relative;
  display:inline-block;
  text-align:center;
  height: inherit;
}
  

В противном случае div.image он увеличивает свою высоту, чтобы разместить содержимое, в данном случае большое изображение.

Смотрите демонстрацию по адресу: http://codepen.io/anon/pen/Hptco

Я протестировал это в Firefox и Chrome, и, похоже, все работает нормально.