3

★前提・実現したいこと

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

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

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

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

【幅=高さ】
画像の説明をここに入力
【幅≠高さ】
画像の説明をここに入力

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

★該当のソースコード

【HTML】

<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>

【CSS】

.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;
}

よろしくお願いします!
マルチポスト
テラテイル

3 件の回答 3

4

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

object-fit - CSS | MDN

.box {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
<img class="box" src=https://placehold.jp/2000x1333.png>

1
  • hinaoeさん これは便利ですね…
    – s.k
    Commented 2016年11月28日 13:02
2

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

①余白ver

        .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;
    }

画像の説明をここに入力

②余白なし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%);
}

画像の説明をここに入力

0

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

.user_show_image {
  width: 200px;
  height: 200px;
  border: 5px solid;
  border-radius: 5px;
  background-position: center center;
  background-size: cover;
  box-sizing: border-box;
}
<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>

1
  • 背景画像にします! 背景画像にすれば、縦長も横長もどちらも余白を生まないとお聞きしました!
    – s.k
    Commented 2016年11月28日 8:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。