@Joker2705

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

Доброго времени суток. Может мой вопрос покажется кому то смешным или простым, но я не могу понять. Суть в следующем: На экран выводятся картинки, от 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, а лишнее справа обрезать?
  • Вопрос задан
  • 1664 просмотра
Пригласить эксперта
Ответы на вопрос 3
Судя по контексту, вопрос скорее всего не про PHP, а про HTML/CSS.
Варианта 2:
1) Изображение вынести в фон родительского div
2) Использовать относительное позиционирование родительского div и абсолютное позиционирование изображения + немного стилей (overflow:hidden; для div)
Оба подхода потребуют установки высоты и ширины для div

https://jsfiddle.net/saybb/37o0c61h/6/
Ответ написан
Комментировать
@Joker2705 Автор вопроса
Ладно, тогда построим вопрос по другому, как можно проценты перевести в пиксели? Т.е. есть переменная $x она показывает ширину, но в процентах, относительно родительского элемента, каким образом можно посмотреть, сколько $x занимает в пикселях, и тогда можно будет задать такую высоту картинке.
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Без PHP, без JS, просто волшебный flex
https://jsfiddle.net/f4we58uz/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы