# Responsive renderer with limits

**URL:** <https://discourse.threejs.org/t/responsive-renderer-with-limits/4401>\
**Category:** Questions\
**Tags:** camera\
**Created:** [October 7, 2018, 2:04pm UTC](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401 "2018-10-07T14:04:59Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![nagman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nagman/32/2846_2.png) [@nagman](https://discourse.threejs.org/u/nagman)\
**Post date:** [October 29, 2018, 10:23am UTC](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401/21 "2018-10-29T10:23:05Z")

</div>

Also, do you think it’s easy to implement a sort of “justify” on this?  
I would like my scene to be aligned on the bottom left corner, and not the center.  
Like if you did in CSS:

```auto
background-position: bottom left;
background-size: cover;

```

Or even more accurate:

```auto
background-position: 20% 80%;
background-size: cover;

```

I’d like to reproduce this layout with 3D:  
 ![next](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/f/f271b995214b260c6c71d109f4529f6766536096.gif)

I suppose it has to do with camera position?

---

<div class="post-metadata">

**Author:** ![nagman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nagman/32/2846_2.png) [@nagman](https://discourse.threejs.org/u/nagman)\
**Post date:** [November 1, 2018, 11:30am UTC](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401/22 "2018-11-01T11:30:41Z")

</div>

Up. Any clue here?

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [November 1, 2018, 5:16pm UTC](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401/23 "2018-11-01T17:16:48Z")

</div>

how is this different?

---

<div class="post-metadata">

**Author:** ![nagman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nagman/32/2846_2.png) [@nagman](https://discourse.threejs.org/u/nagman)\
**Post date:** [November 2, 2018, 9:15am UTC](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401/24 "2018-11-02T09:15:06Z")

</div>

@pailhead

Before:  
 ![4](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/9/957ab029e3b1df56d08244ac1b0b953c9bdd6c0e.gif)

After:  
 ![5](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/1/1dcf1ac5a064778c8003a89dcc2da6f767690573.gif)

---

<div class="post-metadata">

**Author:** ![nagman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nagman/32/2846_2.png) [@nagman](https://discourse.threejs.org/u/nagman)\
**Post date:** [November 16, 2018, 4:15pm UTC](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401/25 "2018-11-16T16:15:21Z")

</div>

Still no clue?

---

<div class="post-metadata">

**Author:** ![nagman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nagman/32/2846_2.png) [@nagman](https://discourse.threejs.org/u/nagman)\
**Post date:** [March 30, 2021, 8:52am UTC](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401/26 "2021-03-30T08:52:22Z")

</div>

It’s been a while now, but here’s another topic that explains better the responsive issue and the solution : [Keeping an object scaled based on the bounds of the canvas (really battling to explain this one) - #10 by nagman](https://discourse.threejs.org/t/keeping-an-object-scaled-based-on-the-bounds-of-the-canvas-really-battling-to-explain-this-one/17574/10)

[Previous page](https://discourse.threejs.org/t/responsive-renderer-with-limits/4401.md?page=1)