CSS 画像を1対１の比にしたい

Question

前提・実現したいこと

cssで画像の比率を１対１にしたいのですが、全く比率が変わりません！
どこがおかしいのかわからず困っています。

発生している問題・エラーメッセージ

画像の比率が変わらない

該当のソースコード

import React from "react";

const interaction = () => {
  return (
    <div className="p-media-thumb">
      <img src="/img/blackboard.png" />
    </div>
  );
};

export default interaction;



.p-media-thumb {
  position: relative;
  width: 100%;
}

.p-media-thumb::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.p-media-thumb > img {
  position: absolute;
  object-fit: cover;
  object-position: center;
  top: 0;
  left: 0;
  width: 100%;
}

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、1:1になりました。
ご提示いただいていない部分に原因があると思われます。

[Patao150205]

そうですかー .p-media-thumb paddingTopの値を変えれば、比率が変わるはずなんですけどねー
純粋にcssをjSXに当ててるだけなんですけどね。なぜここだけが効かないのかがほんとに謎です。

[Patao150205]

.p-media-thumb > img のheightを１００％にしたところ解決しました。before疑似要素は正しい比率のおおきさになっていましたが、img要素に100%を指定していなかったため比率がうまく反映されなかったようです。

Answer 1

.p-media-thumb > img のheightを１００％にしたところ解決しました。before疑似要素は正しい比率のおおきさになっていましたが、img要素に100%を指定していなかったため比率がうまく反映されなかったようです。