30744


### ★前提・実現したいこと

縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。

例えば、幅×高さで以下の二つを同じ **200px200px** で表示する場合です。  
**①2000×1333**  
**②160×160**

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

上記例の場合だと、幅はそろえることができるのですが、  
高さが合いません…

【幅=高さ】  
[![画像の説明をここに入力](https://i.stack.imgur.com/mNZfM.png)](https://i.stack.imgur.com/mNZfM.png)  
【幅≠高さ】  
[![画像の説明をここに入力](https://i.stack.imgur.com/pD10I.png)](https://i.stack.imgur.com/pD10I.png)

それによって画像下にある名前との距離がかわってしまうのでなんとか解決したいのです。

### ★該当のソースコード

【HTML】

[code]

    <div class="user-show-icon-cover">①
     <div class="user-show-icon-information">②
        <%= link_to current_user do %>
         <%= image_tag(@user.image.url, :alt => "アイコン", :class => "user_show_image") %>③
        <% end %>
     </div>
    </div>
    
[/code]

【CSS】

[code]

    .user-show-icon-cover {①
      border-radius: 5px;
      height: 200px;
      width: 200px;
      overflow: hidden;
      position: relative;
    }
    .user-show-icon-information {②
     position: relative;
     height: 200px;
     width: 200px;
    }
    .user_show_image {③
     height: auto;
     width: 100%;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border: solid 5px;
     border-radius: 5px;
    }
    
[/code]

よろしくお願いします！  
マルチポスト  
[テラテイル](https://teratail.com/questions/56854?modal=q-comp)


CC BY-SA 3.0
2016-11-28T07:08:10.353
30742
2016-11-28T13:59:43.850
2020-06-17T08:14:45.997
-1
19459
question
css html5
縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。


teratailで解答を2ついただきました。

①余白ver

[code]

            .user-show-icon-cover {
            position: relative;
            width: 200px;
            height: 200px;
            overflow: hidden;
            border: solid 5px;
            border-radius: 5px;
        }
        .user-show-icon-information {
            position: relative;
            width: 200px;
            height: 200px;
        }
        .user-show-icon-information a {
            display:block;
            width: 100%;
            height: 100%;
        }
        .user_show_image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 100%;
            max-height: 100%;
            height: auto;
            margin:auto;
        }
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/vuTqC.png)](https://i.stack.imgur.com/vuTqC.png)

[code]

    ②余白なしver
    
    .user-show-icon-cover {
      position: relative;
      height: 200px;
      width: 200px;
      border: 5px solid #000;
      border-radius: 5px;
      overflow: hidden;
      box-sizing: border-box;
    }
    .user_show_image {
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      border: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/rytvZ.png)](https://i.stack.imgur.com/rytvZ.png)


CC BY-SA 3.0
2016-11-28T07:50:44.973
30743
2016-11-28T07:57:40.270
2016-11-28T07:57:40.270
19459
19459
30742
answer


背景画像として表示させてはいかがですか？

[code]

    .user_show_image {
      width: 200px;
      height: 200px;
      border: 5px solid;
      border-radius: 5px;
      background-position: center center;
      background-size: cover;
      box-sizing: border-box;
    }
[/code]

[code]

    <div role="img" style="background-image:url(https://placehold.jp/160x160.png)" class="user_show_image"></div>
    
    <div role="img" style="background-image:url(https://placehold.jp/2000x1333.png)" class="user_show_image"></div>
[/code]


CC BY-SA 3.0
2016-11-28T08:11:59.823
30744
2016-11-28T13:59:43.850
2016-11-28T13:59:43.850
8000
19749
30742
answer


Chrome, Firefox, Safari に限りますが、`object-fit`を使えば`background-
image`同様の指定が`img`に対しても可能です。

[object-fit - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/object-
fit)

[code]

    .box {
      width: 200px;
      height: 200px;
      object-fit: cover;
    }
[/code]

[code]

    <img class="box" src=https://placehold.jp/2000x1333.png>
[/code]


CC BY-SA 3.0
2016-11-28T11:35:59.840
30746
2016-11-28T11:35:59.840
2376
30742
answer