# File Uploaderにあげた写真の縦横比を維持したまま表示したい。

**URL:** <https://www.nocode-faq.com/t/topic/3444>\
**Category:** bubble\
**Created:** [2023 年 2 月 18 日午前 12:26 UTC](https://www.nocode-faq.com/t/topic/3444 "2023-02-18T00:26:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![takahiro](https://avatars.discourse-cdn.com/v4/letter/t/ea666f/32.png) [@takahiro](https://www.nocode-faq.com/u/takahiro)\
**Post date:** [2023 年 2 月 18 日午前 12:26 UTC](https://www.nocode-faq.com/t/topic/3444/1 "2023-02-18T00:26:26Z")

</div>

# 実装したい機能

File Uploaderにあげた写真の縦横比を維持したまま、GroupのBackgroundイメージに表示したいです。背景に用いる際に、Group内に余白をうむわけではなく、Groupごとサイズが変わるイメージです。  
よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2023 年 2 月 22 日午前 5:34 UTC](https://www.nocode-faq.com/t/topic/3444/2 "2023-02-22T05:34:44Z")

</div>

Keep element aspect ratio fixedを試してみてください。  
ただ、こちらの設定はshapes, icons, images Elementsのみ設定可能です。

> **[Responsive Properties](https://manual.bubble.io/core-resources/elements/responsive-properties#keep-element-aspect-ratio-fixed)**

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2023 年 2 月 22 日午前 7:18 UTC](https://www.nocode-faq.com/t/topic/3444/3 "2023-02-22T07:18:42Z")

</div>

要件が曖昧ですが、アップロードした画像の縦横サイズを取得した上で、親要素のGroupサイズを合わせるということですか？

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2023 年 2 月 23 日午前 10:04 UTC](https://www.nocode-faq.com/t/topic/3444/4 "2023-02-23T10:04:31Z")

</div>

Groupの背景に画像を指定するのではなく、Groupは通常通り作成しContainer layoutをAlign to parentに。更にMin widthとMin heightをともに0、それぞれFit〜to contentにチェック。

その内部にimageを入れて、Min widthは適当な値（例えば100）の上限なし、Min heightを0でFit height to contentにチェック。

同じGroup内に背景を透過させたGroupを重ねて、コンテンツはその中に作る。

これで意図したものになりませんか？