無効 - css 継承させない



親要素に指定されている場合にのみディメンションを継承する (4)

あなたのクライアントはカスタム要素の幅や高さをどのように設定しますか? とにかく、これを行うことができます:

my-el img, my-el canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

img / canvasは、デフォルトよりも幅が広く、親よりも広いとは言いません。 画像は、このフィドルで見ることができるように、アスペクト比を保持し、その下に空白を残します。http http://jsfiddle.net/vendruscolo/yrvfz1fw/9/

画像を拡大して空き領域を埋めるようにするには、代わりにこれにすることができます

my-el img, my-el canvas {
    display: block;
    width: 100%;
    height: 100%;
}

パーセンテージまたはより小さな幅で要素のサイズを設定する限り、上手くいく。 ピクセルを使用して明示的(より大きい)幅を設定すると、画像はアスペクト比を維持するために停止します( http://jsfiddle.net/vendruscolo/zz6gnytt/2/を参照)。アスペクト比を維持したい場合は、画像のnaturalWidthnaturalHeightを照会し、アスペクト比を維持するための独自の計算を行う必要があります。

私は、Webコンポーネントpolyfillを使用してAPI用のカスタム要素を開発しています。

要素の1つに<img> <canvas>要素または<canvas>要素を含めることができます。 カスタム要素に次元が指定されていない場合、それは子要素のデフォルトサイズでなければなりません。 1つまたは複数のディメンションが指定されている場合、ディメンションは子要素によって継承される必要があります。

私の最初の努力のために、私はCSSのinherit値が十分に良いと思った:

my-el img, my-el canvas {
    width: inherit;
    height: inherit;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
}

ただし、 <my-el>幅または高さにパーセンテージが適用されている場合は、これは機能しません。 代わりに、子要素は親の同じ割合を占めます。

私は解決策でさまざまな試みを試してみましたが、無駄に広範囲に検索しました。 私は純粋なCSSソリューションは不可能かもしれないと思うが、私は誰かがそれ以外のことを証明できることを望んでいる。

明確にするために 、最終的な結果は、 <my-el>あたかも独自の内部次元を持つ<img>であるかのように、インライン置換された要素のように振る舞うべきです。 これらの要素に幅や高さを設定しないと、デフォルトで内部寸法になります。 幅や高さを設定すると、それが優先され、それに応じて「内部」コンテンツのサイズが変更されます。 (少なくとも、私は明確にすることを望む!)


Answer #1

パーセンテージの幅と高さは親要素との相対値なので、おそらく私はこれを使うと思います。

my-el {
    display: inline-block;
}
my-el img, my-el canvas {
    width: 100%;
    height: 100%;
}

どのような幅と高さをmy-elに設定して遊んでも構いません。

http://jsfiddle.net/6afdbfck/


Answer #2

幅が親divに割り当てられている状況のフォールバックとして、 min-width:100% - min-height:100%を使用できます。

 my-el img, my-el canvas {
   width: inherit;
   height: inherit;
   max-width: inherit;
   min-width:100%;
   max-height: inherit;
   min-height: 100%;
 }

fiddle


Answer #3

私があなたの要件を完全に誤解していない限り、必要なものは次のとおりです:

my-el {display: inline-block;}

子要素が親の属性を使用するようにするには、次のようにします。

my-el > img,
my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
}

FWIWの場合、フックとして要素にクラスを追加し、その要素を直接ターゲットにするのではなくスタイルをアタッチする方がよいでしょう。

<myelement class="my-el"><img></myelement>

.my-el {display: inline-block;}

.my-el > img,
.my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
 }

これらのスタイルを親要素の直接の子要素であるすべての要素に適用するには、汎用セレクタを使用します。

.my-el > * {
    height: auto;
    max-width: 100%;
    width: 100%;
 }




custom-element