Комментарии пользователя Дмитрий

Как обрезать картинку в квадрат, именно в квадрат?

Дмитрий @Joker2705 Автор вопроса

Отлично, примерно такой результат и нужен. Осталось только разобраться с тем, что Вы написали. Можете мне помочь, конкретно на моем примере?

Вот полный кусок кода:

<div id="wb_LayoutGrid8" style="">
<div id="LayoutGrid8">
<div class="row">
<div class="col-1">
<div id="wb_SlideShow2" style="display:inline-block;position:relative;width:100%; height: 100px;">
<div id="SlideShow2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="thumbnails">
<?php 
	echo '<li><a href="image/katal/'.$bhp['imag'].'/1.jpg" data-rel="SlideShow3"></a></li>';
	$ii=2;
	while ($ii<=$i){
	$x=100/($i-1);
	echo '	
	<div class="thumbnail" style="width:'.$x.'%;">
	<a href="image/katal/'.$bhp['imag'].'/'.$ii.'.jpg" data-rel="SlideShow3">
	<img class="image" src="image/katal/'.$bhp['imag'].'/'.$ii.'.jpg" alt="" title="">
	</a>
	</div>';
	$ii++;
        }
		
 ?>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>

А вот код из файла CSS:

#wb_LayoutGrid8
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px #CCCCCC solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#LayoutGrid8
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 10px 0px 10px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid8 .row
{
   margin-right: -10px;
   margin-left: -10px;
}
#LayoutGrid8 .col-1, #LayoutGrid8 .col-2, #LayoutGrid8 .col-3
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   font-size: 0px;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;
   position: relative;
}
#LayoutGrid8
{
}
#LayoutGrid8 .col-1, #LayoutGrid8 .col-2, #LayoutGrid8 .col-3
{
   float: left;
}
#LayoutGrid8 .col-1
{
   width: 35%;
   text-align: left;
}
#LayoutGrid8 .col-2
{
   width: 15%;
   text-align: left;
}
#LayoutGrid8 .col-3
{
   width: 50%;
   text-align: left;
}
#LayoutGrid8:before,
#LayoutGrid8:after,
#LayoutGrid8 .row:before,
#LayoutGrid8 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid8:after,
#LayoutGrid8 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#LayoutGrid8 .col-1, #LayoutGrid8 .col-2, #LayoutGrid8 .col-3
{
   float: none;
   width: 100%;
}
}

#wb_SlideShow2
{
   min-height: 20px;
   background-color: #F5F5F5;
   background-image: none;
   border: 1px solid #E3E3E3;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   table-layout: fixed;
   display: table;
}
#SlideShow2
{
   padding: 0px 0px 0px 0px;
   position: relative;
   margin: 0;
   line-height: 1;
   height: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#SlideShow2 .carousel-inner
{
   overflow: hidden;
   width: 100%;
   position: relative;
}
#SlideShow2 .carousel-inner > .item
{
   display: none;
   position: relative;
   -webkit-transition: 0.6s ease-in-out left;
   -moz-transition: 0.6s ease-in-out left;
   -o-transition: 0.6s ease-in-out left;
   transition: 0.6s ease-in-out left;
}
#SlideShow2 .carousel-inner > .item > img, #SlideShow2 .carousel-inner > .item > a > img
{
   display: block;
   line-height: 1;
}
#SlideShow2 .carousel-inner > .active, #SlideShow2 .carousel-inner > .next, #SlideShow2 .carousel-inner > .prev
{
   display: block;
}
#SlideShow2 .carousel-inner > .active
{
   left: 0;
}
#SlideShow2 .carousel-inner > .next, #SlideShow2 .carousel-inner > .prev
{
   position: absolute;
   top: 0;
   width: 100%;
}
#SlideShow2 .carousel-inner > .next
{
   left: 100%;
}
#SlideShow2 .carousel-inner > .prev
{
   left: -100%;
}
#SlideShow2 .carousel-inner > .next.left, #SlideShow2 .carousel-inner > .prev.right
{
   left: 0;
}
#SlideShow2 .carousel-inner > .active.left
{
   left: -100%;
}
#SlideShow2 .carousel-inner > .active.right
{
   left: 100%;
}
#SlideShow2 .thumbnails
{
   margin: 0;
   padding: 0;
   width: 100%;
}
#SlideShow2 .thumbnail
{
   position: relative;
   min-height: 1px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   text-align: center;
   vertical-align: top;
   padding-right: 5px;
}
#SlideShow2 .thumbnail img
{
   max-width: 100%;
   vertical-align: middle;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 0px solid #000000;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

Войдите на сайт