web-dev-qa-db-ja.com

SVGサークルはCSSグリッドの高さに重なり合うことなく適応する必要があります

次の例では、円はグリッドの幅に適応し、アスペクト比を維持しています。コンテナの幅が縮小すると、円もそれに伴って縮小します...

ただし、高さが幅よりも小さい場合（2番目のボックス）、円はグリッドの外側のオーバーラップを縮小しません。代わりに、アスペクト比を維持しながら高さにも適応させる方法はありますか？

.container {
        display: grid;
        background-color: greenyellow;
        margin: 5px;
        min-height: 10px;
        min-width: 10px;
}

.portrait {
                max-height: 100px;
                max-width: 200px;
}

.landscape {
                max-height: 200px;
                max-width: 100px;
}

.aspect-ratio {
        grid-column: 1;
        grid-row: 1;
        background-color: deeppink;
        border-radius: 50%;
 align-self: center;
        justify-self: center;
}
<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

結果は次のようになります。 enter image description here

htmlcsssvgcss-gridaspect-ratio
8
Th3S4mur41

Max-height＆max-widthとともに、コンテナ固有の高さと幅を追加します。

vwおよびvhユニットを使用して、このレイアウトをより柔軟にすることができます。

_  max-height: 100px;
  max-width: 200px;
  width: 100vw;
  height: 100vh;
_

このように、_max-width: 100%; max-height: 100%;_をsvgに設定することが可能で、重複しません。

-EDIT-

Svgビューボックスは正しいアスペクト比ですでにレンダリングされているため、svgの背景をsvg自体の中に移動しても、期待どおりの結果が得られます。cicleタグが役立ちます。

マスク内の別の円タグでボーダー半径を模倣することは可能ですか

Svgの他のすべての要素は、マスクされたグループ内に配置する必要があります。すなわち：<g mask="url(#mask)">

_.container {
  display: grid;
  background-color: greenyellow;
  margin: 5px;
  min-height: 10px;
  min-width: 10px;
}

.portrait {
  max-height: 100px;
  max-width: 200px;
  width: 100vw;
  height: 100vh;
}

.landscape {
  max-height: 200px;
  max-width: 100px;
  width: 100vw;
  height: 100vh;
}

.aspect-ratio {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
}

.aspect-ratio .bkg{
  fill: deeppink;
}_
_<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1">
    <mask id="mask">
      <circle cx=".5" cy=".5" r=".5" fill="#fff"/>
    </mask>
    <circle cx=".5" cy=".5" r=".5" class="bkg"/>
    <g  mask="url(#mask)">

    </g>
  </svg>
</div>

<div class="container portrait">
  <svg class="aspect-ratio"viewBox="0 0 1 1">
    <mask id="mask">
      <circle cx=".5" cy=".5" r=".5" fill="#fff"/>
    </mask>
    <circle cx=".5" cy=".5" r=".5" class="bkg"/>
    <g  mask="url(#mask)">

    </g>
  </svg>
</div>_
0
thetont