ブラウザ毎のCSSの切り替え片（IEとChrome等）

Question

画像を歪ませず丸く表示するCSSを書いています。
google chromeでは問題無く綺麗に表示されるのですが、Internet Exploreでは歪んでしまいます。同じCSSファイル内でブラウザによって切り替える様にしたいのですが、うまく動かず間違いご指摘頂けますと幸甚です。

• chrome

• IE（ちょっと分かり難いかもですが、歪んでいます）

元データ ： web site

##SCSSを利用しています
icon-top{
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  object-fit: cover; /* ADD */
 }
 @media all and (-ms-high-contrast:none){
   .icon-top {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
  }
 .icon-top img {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

Answer 1

object-fitプロパティはIEやEdgeには対応していません。
なのでTak_Matzさんのようにbackgroundで処理するか、JSで処理するかになります。

bfred-it/object-fit-images

Comments

[innjera]

コメント有難う御座います。object-fitがIEで対応していないことは理解しておりまして、IEでは次のコードで綺麗に表示できるはずなのですが、CSSファイル内でIEとnon IEで適用されるCSSを変えることができません
.icon-top {
width: 10rem;
height: 10rem;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.icon-top img {
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

[gin]

<meta http-equiv="X-UA-Compatible" content="IE=edge">
をviewportの下あたりに書いてみましょう

[innjera]

いろいろと有難う御座いました！ご協力感謝です！
いろいろ試してみたのですが、結局、ご教示頂いたJSのライブラリ
（bfred-it/object-fit-images）が一番楽で確実でした。引き続き宜しくお願い致します。

Answer 2

興味があったので再挑戦してみました。
ただし、以下のコードは画像が横長の場合はうまくいきますが、縦長の場合期待する結果とならないと思われます。
※縦長画像の場合、.icon-top imgのwidthとheightの値を入れかえると上下が見切れた画像として表示されます。

<div class="icon-top">
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="">
</div>

.icon-top img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
}

@media all and (-ms-high-contrast: none) {
  .icon-top {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
  }
  
  .icon-top img {
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

---

期待される回答とは異なるかもしれませんが、以下のように.icon-topの背景画像扱いとする方法はどうでしょうか？

<div class="icon-top" style="background-image: url(img.jpg);"></div>

.icon-top {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

Comments

[innjera]

コメント有難う御座います。Ruby（Rails）でコードを書いているのですが、できれば、cssの「直書き（styleの利用）」を避けたいのと、styleを利用しないとなると、cssファイルにbackground-imageを入れることにまるかと思いますが、そうすると、ユーザー毎に写真を埋め込むコードを書けなくなってしまいます。。。。

[退会済みユーザー]

中途半端な対応となりますが、CSSのみのものを追記してみました。

[innjera]

いろいろと有難う御座いました！ご協力感謝です！
いろいろ試してみたのですが、結局、ginsさんにご教示頂いたJSのライブラリ
（bfred-it/object-fit-images）が一番楽で確実だったので、それにて解決しました！引き続き宜しくお願い致します。