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

Question

[Дмитрий]

Доброго времени суток. Может мой вопрос покажется кому то смешным или простым, но я не могу понять. Суть в следующем: На экран выводятся картинки, от 1 до 4, каждый раз по разному, в объект, который занимает 35% экрана но ширине. Есть переменная $i, которая хранит информацию, сколь картинок есть сейчас, есть функция $x=100/$i которая сообщает мне какой ширины будет картинка, относительно родительского объекта (тот который занимает 35% экрана). Высота родительского объекта нигде не указана и занимает 100% от высоты картинки. Есть вот такой код:

$ii=2;
while ($ii<=$i){
         $x=100/($i-1);
         echo '<div style="width:'.$x.'%;">
	<img class="image" src="image/1.jpg" alt="" title="">
	</div>';
	$ii++;
}

который высчитывает ширину картинки, и сжимает ее до нужного размера, тем самым, даже если в папке лежит большая картинка, на экране будет показана ее маленькая копия. Но проблема вот в чем, по высоте она никак не обрезается и, соответсвенно, если картинка вертикальная, то у нее получается большая высота, а если картинка широкоформатная, но по высоте она получается слишком узкая.
Итак, внимание, вопрос: Как мне сделать, что бы эти картинки превратились в квадраты, путем обрезания лишних частей картинки, если она вертикальная, то обрезать надо снизу, а если горизонтальная, то потогнать ее высоте до размера, равного размеру переменной $x, а лишнее справа обрезать?

Comments

[Antonio Solo]

клади картину в бэкграунд

[Ankhena]

как можно проценты перевести в пиксели?

www.php.su/getimagesize

[Дмитрий]

Ankhena, А можно на примере показать? Как конкретно в моем случае использовать данную команду?

[Ankhena]

Дмитрий, у вас вот тут

который высчитывает ширину картинки, и сжимает ее до нужного размера, тем самым, даже если в папке лежит большая картинка, на экране будет показана ее маленькая копия.

написано то, чего нет в коде.
А в коде только про размер div'а в котором лежит картинка.
Соответственно у меня сомнения, что вы действительно изменяете картинку. Собственно и вопроса тогда бы не было.

Пример использования есть прямо в статье (альтернатива imagesx и imagesy). Получаете ширину и высоту. Выясняете что больше. То и обрезаете.

[Дмитрий]

Ankhena,

$x=100/($i-1);
echo '<div style="width:'.$x.'%;">
<img class="image" src="image/1.jpg" alt="" title="">
</div>';

$x - высчитывает, какой процент от родительского элемента будет занимать картинка. Если $i меньше 2, то цикл вообще не срабатывает, если = 2, то картинка будет занимать 100% , если = 3, то 50% и т.д. Соответственно, выводится сжатая по ширине и пропорционально по высоте картинка.

Итак, вопрос в следующем, как мне узнать, сколько пикселей будет занимать $x, чтобы указать в пикселях высоту картинки? Ведь если я укажу в процентах, то она обрежется (сожмется) в процентах, относительно родителя.

[Дмитрий]

Практически дошло до меня, как нужно сделать, но тут нужна команда, которая будет считывать размер (а именно ширину) окна браузера. Подскажите, есть такая команда?

[Ankhena]

Дмитрий,

Подскажите, есть такая команда?

На PHP, естественно, нет. Серверная часть ничего не узнает о размере клиентского окна. Только JS.

Соответственно, выводится сжатая по ширине и пропорционально по высоте картинка.

Так это браузер ее сжимает, сама картинка не модифицируется.
А раз так, то вся эта квадратность и визуальная обрезка решается с помощью CSS.

[Дмитрий]

Ankhena, Уде попробовал подключить JS, но т.к. этот язык для меня новый подскажите, что не так? Вот код для примера:

$x=100/($i-1);
$width = "<script type='text/javascript'>document.write(window.innerWidth);</script>";
$w=$width/$x;
echo 'Ширина '.$w.', '.$width.'';

С этим кодо на экран выводит корректно только $width, а вот $w выводится равной 0

[Дмитрий]

Ankhena, Или подскажите, как это с помощью CSS решить?

Answer 1

[Mikhail Kupriyanov]

Судя по контексту, вопрос скорее всего не про PHP, а про HTML/CSS.
Варианта 2:
1) Изображение вынести в фон родительского div
2) Использовать относительное позиционирование родительского div и абсолютное позиционирование изображения + немного стилей (overflow:hidden; для div)
Оба подхода потребуют установки высоты и ширины для div

https://jsfiddle.net/saybb/37o0c61h/6/

Answer 2

[Дмитрий]

Ладно, тогда построим вопрос по другому, как можно проценты перевести в пиксели? Т.е. есть переменная $x она показывает ширину, но в процентах, относительно родительского элемента, каким образом можно посмотреть, сколько $x занимает в пикселях, и тогда можно будет задать такую высоту картинке.

Comments

[Mikhail Kupriyanov]

Получить размеры родительского элемента можно следующим кодом
elem.parentElement.clientWidth;
Где elem - это node в DOM

Возможно, что пытаться рассчитать размеры на PHP + JS - это лишнее, а задача решается вёрсткой через с помощью grid или flexbox.
Попробуйте выложить вариант кривого изображения в codepen или jsfiddle в тематической ветке по вёрстке

Answer 3

[Ankhena]

Без PHP, без JS, просто волшебный flex
https://jsfiddle.net/f4we58uz/

Comments

[Дмитрий]

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

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

<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;
}

[Ankhena]

Дмитрий, У вас очень много лишнего кода и ошибок. Например, li без родительского ul или ol.

Вот с вашими классами https://jsfiddle.net/z7jyfxaw/

[Ankhena]

Дмитрий, не помогло?