Mr Crabbz

<pre>
print_r($loop_post);
</pre>

<div class="crop">
   <img>
</div>

.crop {
   position: relative;
   width: 100px;
   height: 100px;
   overflow: hidden;
   display: inline-block;
}

.crop img {
   position: absolute;
   left: 50%;
   top: 50%;
   min-height: 100%;
   min-width: 100%;
   height: auto;
   width: auto;
   transform: translate(-50%, -50%);
   /* max-height: 100% - для горизонтальной версии (слева)
  // или
  /* max-width: 100% - для вертикальной версии (справа)
}

<script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
      $(".center").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
      });
      $(".variable").slick({
        dots: true,
        infinite: true,
        variableWidth: true
      });
    });
  </script>

if($(window).width > 992){

$(".main").onepage_scroll({
    sectionContainer: "section"
});
$(".top_menu a").click(function() {
    id = $(this).attr('data-to');
    $(".main").moveTo(id);
});

}

$('body').on('click','a' , function(event){
    if (!confirm('Данные не сохранены. Покинуть страницу?') ){
      event.preventDefault();
      event.stopPropagation();
    }
    else {
        return true;
    }
  })