Jump to content
  • Sign Up
  • 0

Как разместить изображения чтобы они отображались квадратными


alleclf
 Share

Question

Есть несколько изображений, как горизонтальные так и вертикальные. Как их можно выстроить в ряд так, что бы все они стали квадратными. То есть, растянуть картинку меньшей стороной по размеру блока, а та часть что вылазит из блока - скрыть. Вместо продолговатой картинки отобразить только ее середину в форме квадрата.

Вот пример, но это не совсем то, надо чтобы картинки масштабировались а там просто отображается верхний угол - https://jsfiddle.net/jk8todrq/

 

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
03.07.2022 в 04:40, Igor Schnaider сказал:

Воспользуйтесь свойством object-fit: https://jsfiddle.net/xzs1bv7k/

Спасибо, то что надо.

Ещё хотел узнать, можно ли сделать что бы картинки помещались целиком в заданную область (в квадрат). То есть, у вертикальных изображений отступы слева-справа картинка в центре, у горизонтальный изображений отступы сверху-снизу картинка в центре.

Link to comment
Share on other sites

  • 0

Не могу понять можно ли как-то во флексах реализовать перенос ниже элементов которые не влезают в выделенную область.

Вот пример:

https://jsfiddle.net/xostfzj6/1/

В область влезает ровно 4 элемента. Как сделать чтобы остальные размещались ниже? В 2 или больше строк (смотря сколько картинок).

Link to comment
Share on other sites

  • 0
01.08.2022 в 14:18, Switch74 сказал:
flex-wrap: wrap;

Не совсем работает. Если количество картинок не кратно числу в одной строке то последние произвольно растягиваются. Например, в одном рядке 4 элемента, всего элементов 9. То первые 8 элементов правильно распределятся в 2 рядка а в третьем будет один элемент размером на весь рядок.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy