# Image comparison 1:1

**URL:** <https://community.sitejet.io/t/image-comparison-1-1/5550>\
**Category:** Website Builder\
**Created:** [February 22, 2026, 7:52pm UTC](https://community.sitejet.io/t/image-comparison-1-1/5550 "2026-02-22T19:52:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrewpjmorris](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@Andrewpjmorris](https://community.sitejet.io/u/Andrewpjmorris)\
**Post date:** [February 22, 2026, 7:52pm UTC](https://community.sitejet.io/t/image-comparison-1-1/5550/1 "2026-02-22T19:52:56Z")

</div>

Hello,

Can someone provide guidance on how to set the image comparison to match the square or 1:1 of the images, while also maintaining responsiveness on different platforms?

Thanks!

Andrew

---

<div class="post-metadata">

**Author:** ![Kalisperakichris](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kalisperakichris/32/3572_2.png) [@Kalisperakichris](https://community.sitejet.io/u/Kalisperakichris)\
**Post date:** [February 24, 2026, 10:28am UTC](https://community.sitejet.io/t/image-comparison-1-1/5550/2 "2026-02-24T10:28:41Z")

</div>

Hi Andrew 👋

To make it square, just set **the same value for width and height**.

For example (per viewport):

- Desktop → 500px width / 500px height

- Tablet → 400px / 400px

- Mobile → 300px / 300px

As long as width and height are equal, it will stay perfectly square.

Since Sitejet is responsive, you can adjust those values separately for Desktop, Tablet, and Mobile.

That’s all you need 🙂

 ![Screenshot 2026-02-24 122630](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/6/655ef7abb9bd3685fb9c80af0218e47c935b5b7a.jpeg)

examples here :

 ![Screenshot 2026-02-24 121842](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/3/3c0760de3d49490064837f78a3132734d5928f92.jpeg)

 ![Screenshot 2026-02-24 121832](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/8/85f293d4e39b675561018aeec3c10377cf18058f.jpeg)

---

<div class="post-metadata">

**Author:** ![Andrewpjmorris](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@Andrewpjmorris](https://community.sitejet.io/u/Andrewpjmorris)\
**Post date:** [February 25, 2026, 10:30pm UTC](https://community.sitejet.io/t/image-comparison-1-1/5550/3 "2026-02-25T22:30:11Z")

</div>

Hi Chris!

Much appreciated! In the bit of the research that I’ve done most indications say that the more modern way is to use the aspect ratio code indicating one to one. Is there any way to insert that somewhere in the image comparison code? Forcing pixel size seems kind of limiting when there seems to be better ways and more efficient ways to do this.

---

<div class="post-metadata">

**Author:** ![Kalisperakichris](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kalisperakichris/32/3572_2.png) [@Kalisperakichris](https://community.sitejet.io/u/Kalisperakichris)\
**Post date:** [February 26, 2026, 5:15am UTC](https://community.sitejet.io/t/image-comparison-1-1/5550/4 "2026-02-26T05:15:50Z")

</div>

You’re 100% right — **`aspect-ratio: 1 / 1` is the modern / clean way** to keep it square, and you don’t need to hard-force a fixed pixel height.

In Sitejet you can do it by applying the aspect ratio to the **wrapper/container that holds the comparison** , e.g.:

```auto
/* wrapper of the comparison element */
.compare-wrap{
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 100%;
}

/* make sure images fill the square */
.compare-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

```

If the comparison snippet has an inner element that controls the visible area, put the `aspect-ratio` on **that** element instead (the one that defines the height).

And if you need different behavior per device, you can still tune it per breakpoint in Sitejet (desktop/tablet/mobile) without ever locking it to a single fixed pixel size.

---

<div class="post-metadata">

**Author:** ![Andrewpjmorris](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@Andrewpjmorris](https://community.sitejet.io/u/Andrewpjmorris)\
**Post date:** [February 28, 2026, 5:58pm UTC](https://community.sitejet.io/t/image-comparison-1-1/5550/5 "2026-02-28T17:58:11Z")

</div>

Thanks Chris. I am not really a coder and tried this but it didn’t work. Are you able to take a screenshot of that code inserted into an example css so I can replicate it?

With appreciation!

Andrew