0

画像の大きさを 親要素の残りの残りの高さに合わせて自動で縮小したいです。
方法はある程度問いませんが、特殊な条件なのもあってどうしたらいいか迷っています。

現状の説明をします。
親要素のdivの中に子要素のdivがあり、子要素のdivの中にテキストや画像などのインライン要素が入っています。
body部分は別のプログラムから自動生成されます。

cssにて子要素を余白も含めてブラウザの表示領域と一致させます。
つまり子要素の中身が大きかったとしても、スクロールバーが表示されない状態です。
合わせてスクロールバーを非表示、スクロールを禁止します。
余白はpaddingにて上下左右10%ずつ取り、コンテンツの大きさが表示領域の80%になるようにします。

htmlの全体は以下のような感じです。

<!DOCTYPE html>
<head><meta charset="utf-8"><style type="text/css"> <!--
html{
    overflow: -moz-scrollbars-none;
    overflow: hidden
}
body{margin: 0}
body::-webkit-scrollbar {display:none}
.parent {position: relative}
.child {
    position: absolute;
    padding: 5vh 5vw;
    width: 90vw;
    height: 90vh;
}
img{
    max-width: 100%
}
--></style></head>
<body>
    <div id="parent" class="parent">
        <div id="p0005" id="child" class="child">
            <p>ああああああああああああああああああ</p>
            <p><img src="https://bit.ly/2qzwuIF"></p>
        </div>
    </div>
</body>
</html>

このとき子要素の中身の高さが大きいまたはブラウザサイズが小さいと、
当たり前ですが、子要素のコンテンツ高さ80vhを超えてしまいます。
そのため子要素の高さをはみ出してしまいます。

テキストは仕方ないとして、画像を子要素からはみ出さない高さに自動で縮小したいです。

スニペットだとわかりずらいので別サイトを https://app.netlify.com/ をつかって用意しました。https://serene-neumann-f8ba03.netlify.com/
スニペットを実行→最大化でも正しく動作しました。
ウィンドウサイズをぐりぐりいじったとき、
画像が親要素をはみ出さ自動で縮小されるようにしたいです。

できないこと

  • htmlの中身の構造の変更
  • サイズの直接指定(ブラウザの表示領域基準でサイズを合わせる必要がある)

できること

  • cssを変える
  • javascriptを仕込む
    • ただしオンラインが必要なcdnなどのサービスは不可
    • minifyして動くならば仕込むことは可能

具体的な手段はわかりませんが、私がとりあえず考えた方法としては、
ページ内の画像が複数枚ある場合を想定して、
画像を除いたテキストの高さを何らかの方法で取得して、
親要素の高さから引いて残りの高さを計算、縦に並ぶ画像の枚数で割り、
画像の高さを書き換えるというものです。

こういったことができるのかも合わせて教えていただけると幸いです。

よろしくお願いします。

1 件の回答 1

0

Flexible Box Layout もしくは Grid Layout を用いることで実現出来ます。ここで、 flex アイテムと grid アイテムの両方で、自動最小サイズの計算値に注意する必要があります [1], [2]

Flexible Box Layoutでの例:

html {
  overflow: -moz-scrollbars-none;
  overflow: hidden
}

body {
  margin: 0
}

body::-webkit-scrollbar {
  display: none
}

img {
  max-width: 100%;
}

.parent {
  position: relative;
}

.child {
  display: flex;
  position: absolute;
  flex-direction: column;
  padding: 5vh 5vw;
  width: 90vw;
  height: 90vh;
}

.child>p:last-of-type {
  flex: 1;
  min-height: 0;
}

.image {
  height: 100%;
}
<div id="parent" class="parent">
  <div id="p0005" class="child">
    <h1>ああああああああああ</h1>
    <p>ああああああああああああああああああ</p>
    <ul>
      <li>ああああああああああああああああ</li>
      <li>ああああああああああああああああ</li>
    </ul>
    <p><img src="https://bit.ly/2qzwuIF" class="image"></p>
  </div>
</div>

Grid Layout での例:

html {
  overflow: -moz-scrollbars-none;
  overflow: hidden
}

body {
  margin: 0
}

body::-webkit-scrollbar {
  display: none
}

img {
  max-width: 100%;
}

.parent {
  position: relative;
}

.child {
  display: grid;
  position: absolute;
  padding: 5vh 5vw;
  width: 90vw;
  height: 90vh;
}

.child>p:last-of-type {
  min-height: 0;
}

.image {
  height: 100%;
}
<div id="parent" class="parent">
  <div id="p0005" class="child">
    <h1>ああああああああああ</h1>
    <p>ああああああああああああああああああ</p>
    <ul>
      <li>ああああああああああああああああ</li>
      <li>ああああああああああああああああ</li>
    </ul>
    <p><img src="https://bit.ly/2qzwuIF" class="image"></p>
  </div>
</div>

1
  • できました!ありがとうございました
    – hato
    Commented 2019年11月27日 8:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。