CSSで画像サイズを可変させたい

Question

前提・実現したいこと

どんな画像も正円にしつつ、画面幅に応じて可変させたいです。

-------追記-------
kei344様のご回答は正円にはなりましたが、今回は画像の最大幅を100pxまでと考えております。CSSの「max-width: 100px;」はそのための記載です。
-----ここまで-----

該当のソースコード

floatで横並びにし、画面幅に応じて画像を可変させているのですが、画像が正円にできなくて困っている状況です。

動作サンプル：https://jsfiddle.net/pnfo5kw8/

<div class="outer">
  <div class="left">
    <img alt="" src="http://bit.ly/34myLVJ">
  </div>
  <div class="right">
    <div>あああああ</div>
  </div>
</div>

.left {
    float: left;
    max-width: 100px;
    max-height: 100px;
    margin: 0 15px 0 0;
    width: calc(20% - 15px);
}
.left img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid black;
}
.right {
    width: 80%;
    float: left;
}

試したこと

下記のように画像サイズを「％」から「px」に指定すると正円にできますが、これでは画面幅に応じて可変させられなくなってしまいます。

.left img {
    width: 100px; /* pxに変更 */
    height: 100px; /* pxに変更 */
    border-radius: 50%;
    border: 2px solid black;
}

また下記のようにfloatをやめてflexを使ってもできませんでした。

.outer {
    display: flex; /* 追加 */
}
.left {
    /* float: left; */ /* 削除 */
    max-width: 100px;
    max-height: 100px;
    margin: 0 15px 0 0;
    width: calc(20% - 15px);
}

もしCSSでの解決策がございましたら宜しくお願い致します。

Comments

[kyoya0819]

max-width,min-widthを同じ値で指定する意図はなんですか？

[BOURBON]

正円にするために必要と考えているためで他に意図はないので、実現したいことが可能になるならばこの値は同じでなくとも構いません。いけそうですか？

Answer 1

.left img {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  border: 2px solid black;
}

求めているものと違っていたらすみません。
画面幅に対してleft要素を20%、right要素を80%に設定するという解釈でよければ
画像のheightとwidthを上記のように書き直せば正円になると思います。
(20vwは画面幅の20%という意味です。heightの方にも同じ数字を当てはめてあげます)

Comments

[BOURBON]

おおお！高さにはvhという発想しかありませんでした。そちらのコードに加えて以下のように最大サイズを指定してやれば完璧でした。どうもありがとうございます！

.left img {
width: 20vw;
height: 20vw;
border-radius: 50%;
border: 2px solid black;
max-width: 100px; /* 最大サイズを指定 */
max-height: 100px; /* 最大サイズを指定 */
}

Answer 2

.outer が画面幅ならvwを使ったほうが早いけど、一応こういう手がある。

.left {
    float: left;
    max-width: 100px;
    max-height: 100px;
    margin: 0 15px 0 0;
    width: calc(20% - 15px);
  /* ADD */
  position: relative;
  padding-top: calc(20% - 15px);
}
.left img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid black;
  /* ADD */
  object-fit: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
```**動くサンプル：**[https://jsfiddle.net/pnfo5kw8/](https://jsfiddle.net/pnfo5kw8/)

---

（コメント欄から移設）
動くサンプル（修正版）：[https://jsfiddle.net/2tv6bpo4/](https://jsfiddle.net/2tv6bpo4/)

Comments

[BOURBON]

どうもありがとうございます。宜しくお願い致します。

ご回答のADD、試させて頂きました。
https://jsfiddle.net/01t8wx6c/
残念ながら、画面幅が大きいときに画像は正円でなく縦長になってしまうようです。

つまり「.left」の「max-height: 100px;」が効かず、縦が100px以上になる。という不思議な状態になります。

[kei344]

あ、すみません下記削除してください。
max-width: 100px;
max-height: 100px;
https://jsfiddle.net/2tv6bpo4/

[BOURBON]

すると最大100pxを超えてしまいまして。なかなか思う通りにはいかないものですね。

[kei344]

> asuchi0819 2019/12/15 10:38
> max-width,min-widthを同じ値で指定する意図はなんですか？
>
> BOURBON 2019/12/15 11:38 編集
> 正円にするために必要と考えているためで他に意図はないので、実現したいことが可能になるならばこの値は同じでなくとも構いません。いけそうですか？

えー。

[BOURBON]

すみません笑、「同じでなくとも構いません」と書いただけなので、「まるごと削除されてしまう」というのは少し違うかなと、大変僭越ではございますが、思ったりもします…。やはりJavaScriptなどがないとできませんか？

[kei344]

「他に意図はない」なら削除しても問題ないと思ったのですが、どうも提示されている前提条件が私には読み取る能力が不足しているようです。他に方法が有る可能性もあるとは思いますが、BOURBONさんの確認の手間を増やすだけになりそうなので他の回答者に任せます。

[BOURBON]

「他に意図はない」の内容は「同じ値で指定する意図」であって、「サイズを指定する意図」ではありません。後者と捉えられるとは、私の言葉も足りなかったのだと反省しております。

仰るように他の可能性をご提示くださる方をお待ちすることに致します。ご回答ありがとうございました。