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

Question

###前提・実現したいこと
縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。

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

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

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

【幅=高さ】

【幅≠高さ】

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

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

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

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

よろしくお願いします！

マルチポスト
スタックオーバーフロー

Comments

[maisumakun]

画像の縦横比は崩れてもいい、ということでしょうか。

[s.k]

maisumakunさん、いえ、縦横比は崩さないようにしたいです！トリミングor余白を入れるでなんとかしたいです！

Answer 1

こんな感じでいいんですかね？

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

Comments

[s.k]

ginさん

ありがとうございます！まさしくこれをやりたかったのです。
margin: auto;とリンクにブロックの合わせ技を使うのですね！
いつもありがとうございます！

Answer 2

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

これでどうでしょうか？幅≠高さのときは画像を中央揃えで表示させます。
ちなみにIE9+対応です。

###ベストプラクティス

一番よい方法は背景画像にしてしまうことです。

<div class="user-show-icon-cover">
  <div class="user-show-icon-information">
    <a href="" style="background-image:url('画像url')"></a>
  </div>
</div>

.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-icon-information 
{
  width: 100%;
  height: 100%;
}
.user-show-icon-information a 
{
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

Comments

[s.k]

ithat_meさん

ありがとうございます！今、試したのですができました。
ちょっと高等テク過ぎて仕組みがわからないのですけども、
幅≠高さの時に中央揃えできます。感動です(´;ω;｀)

[Takamoso]

ただ、この方法は縦長画像の場合に左右に余白ができてしまうことです。
縦長画像、横長画像のどちらかに対応させることはできるのですが、CSSだけで両方対応するのは自分が知る限り不可能です。

[s.k]

そうなんですね。
では、javascriptを使うかcssでbackground-colorを使用して対処して参ります！

[Takamoso]

回答に追記したベストプラクティスの方法でもできるので、お好きな方で！

[s.k]

背景画像にすれば縦長の画像でも左右に余白ができないのでしょうか？

[Takamoso]

できません！

[s.k]

じゃあ、背景画像にします！！