画像をうまくトリミングできない

###知りたいこと
画像によってうまくトリミングできものがあります。
その原因と解決方法が知りたいです。

1.縦長写真です。問題なくトリミングされます。
2.横長写真です。全く問題はありません。
3.縦長写真です。縦側がトリミングされず、縮んでしまいます。

css
1.posts-index{
2  position: relative;
3  padding: 5px 10px;
4  background-color: white;
5  overflow: hidden;
6}
7.post-left {
8  float: left;
9  width: 10%;
10}
11.post-left img {
12  width: 170px;
13  height: 120px;
14  object-fit: cover;
15}
16.post-right {
17  float: left;
18  width: 90%;
19  padding-left: 130px;
20  margin: 8px 0;
21  text-align: left;
22}

html
1<% @posts.each do |post| %>
2    <div class="posts-index">
3      <div class="post-left">
4          <%= image_tag post.image_name.thumb.url %>
5      </div>
6      <div class="post-right">
7          <p><%= post.title %></p>
8      </div>
9    </div>
10<% end %>

heightを無くした場合

css
1.post-box img {
2  width: 170px;
3  object-fit: cover;
4}

結論、横長写真によって、うまくトリミングされるものと、されないものがあります。
これらの解決方法をお分かりの方、ぜひよろしくお願いします。
###追記
cssを以下のように変更した場合

css
1.post-left {
2  width: 170px;
3  height: 120px;
4}
5.post-left img {
6  width: 100%;
7  height: 100%;
8  object-fit: cover;
9  display: block; /* 不要かもしれません */
10}

###追記2
cssを以下のようにした場合、こちらのようになります。
まだ、3番の写真が縮む形になってします。
（新たに判明したのが、iPhoneから見た場合、うまくトリミングされます。パソコン、アンドロイドから見た場合、現在のように表示されます）

css
1.posts-index {
2  position: relative;
3  padding: 5px 10px;
4  background-color: white;
5  overflow: hidden;
6}
7.post-left {
8  float: left;
9  /* width: 10%; */
10
11  /* 追加 */
12  width: 170px;
13  height: 120px;
14  overflow: hidden;
15}
16.post-left img {
17  /*
18  width: 170px;
19  height: 120px;
20  */
21  /* 追加 */
22  display: block;
23  width: 100%;
24  height: 100%;
25  object-fit: cover;
26}
27.post-right {
28  float: left;
29
30  /* width: 90%; */
31  width: calc(100% - 130px - 170px);
32
33  padding-left: 130px;
34  margin: 8px 0;
35  text-align: left;
36}

###追記3
追記2から以下のように変更した場合です。

css
1.post-left img {
2  display: block;
3  min-width: 100%;
4  min-height: 100%;
5  object-fit: cover;
6}```
7![イメージ説明](626b13e6d148ecde7acdec0aadd11c62.png)

行動規範の内容に同意します

回答1件

こちらだといかがでしょうか?

CSS
1.post-box {
2  width: 170px;
3  height: 120px;
4}
5.post-box img {
6  width: 100%;
7  height: 100%;
8  object-fit: cover;
9  display: block; /* 不要かもしれません */
10}

追記していただいたCSSに追加しました。ご確認お願いします。

CSS
1.posts-index {
2  position: relative;
3  padding: 5px 10px;
4  background-color: white;
5  overflow: hidden;
6}
7.post-left {
8  float: left;
9  /* width: 10%; */
10
11  /* 追加 */
12  width: 170px;
13  height: 120px;
14  overflow: hidden;
15}
16.post-left img {
17  /*
18  width: 170px;
19  height: 120px;
20  */
21  /* 追加 */
22  display: block;
23  width: 100%;
24  height: 100%;
25  object-fit: cover;
26}
27.post-right {
28  float: left;
29  
30  /* width: 90%; */
31  width: calc(100% - 130px - 170px);
32
33  padding-left: 130px;
34  margin: 8px 0;
35  text-align: left;
36}

投稿2020/05/17 09:39

編集2020/05/17 10:10

new1ro

総合スコア4528

tomtom1

2020/05/17 10:01

ありがとうございます！そのようにした場合、どのようになるか追記しました！また、抜けているところや他要素のcssも必要かと思い、新たに記載しました！

tomtom1

2020/05/17 11:32

ご提示頂いたcssに変更した結果、を追記しました！また、iPhoneではうまくトリミングされるということが判明しました。パソコンとアンドロイドでは現在の表示のようになります。

new1ro

2020/05/17 14:13

min-width、min-heightだといかがでしょうか? .post-left img { display: block; /* width: 100%; height: 100%; */ min-width: 100%; min-height: 100%; object-fit: cover; }

tomtom1

2020/05/17 15:42

追記3に追加しました！残念ながらまだ解決に至りませんでした。

new1ro

2020/05/17 21:04 編集

↓以下、試してみました。 https://codepen.io/new1ro/pen/bGVQGEN すみません、「min-widthとmin-height」を試すと崩れたので「widthとheight」に戻したほうがいいと思います。

tomtom1

2020/05/18 06:35

ありがとうございます。そのように行いましたら、追記2の表示のようになりました。今回、imgの縦横比率を保ちながらトリミングを行いたいのですが、まとめると、・横長サイズは問題ないのですが、縦長写真で発生。・何故かトリミングされるものとされないものがある。写真1と写真3の違い。・iPhoneでは問題なく、アンドロイドやパソコンにて発生。もしかしたら、cssというより、写真データに何かしらの情報が不足している、あるいは不要情報がある縦長写真は、縦横比率を保つことができないのではないか？と疑っているところです。

行動規範の内容に同意します