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

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

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

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

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

【幅=高さ】
イメージ説明

【幅≠高さ】
イメージ説明

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

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

HTML
1<div class="user-show-icon-cover">①
2 <div class="user-show-icon-information">②
3    <%= link_to current_user do %>
4     <%= image_tag(@user.image.url, :alt => "アイコン", :class => "user_show_image") %>③
5    <% end %>
6 </div>
7</div>

CSS
1.user-show-icon-cover {①
2  border-radius: 5px;
3  height: 200px;
4  width: 200px;
5  overflow: hidden;
6  position: relative;
7}
8.user-show-icon-information {②
9 position: relative;
10 height: 200px;
11 width: 200px;
12}
13.user_show_image {③
14 height: auto;
15 width: 100%;
16 display: block;
17 position: absolute;
18 top: 0;
19 left: 0;
20 right: 0;
21 bottom: 0;
22 border: solid 5px;
23 border-radius: 5px;
24}

よろしくお願いします！

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

maisumakun

2016/11/28 07:16

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

s.k

2016/11/28 07:20

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

回答2件

ベストアンサー

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

css
1.user-show-icon-cover {
2	position: relative;
3	width: 200px;
4	height: 200px;
5	overflow: hidden;
6	border: solid 5px;
7	border-radius: 5px;
8}
9.user-show-icon-information {
10	position: relative;
11	width: 200px;
12	height: 200px;
13}
14.user-show-icon-information a {
15	display:block;
16	width: 100%;
17	height: 100%;
18}
19.user_show_image {
20	position: absolute;
21	top: 0;
22	left: 0;
23	right: 0;
24	bottom: 0;
25	max-width: 100%;
26	max-height: 100%;
27	height: auto;
28	margin:auto;
29}

投稿2016/11/28 07:38

gin

総合スコア2722

回答へのコメント

s.k

2016/11/28 07:48

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

css
1.user-show-icon-cover {
2  position: relative;
3  height: 200px;
4  width: 200px;
5  border: 5px solid #000;
6  border-radius: 5px;
7  overflow: hidden;
8  box-sizing: border-box;
9}
10.user_show_image {
11  height: 100%;
12  display: block;
13  position: absolute;
14  top: 0;
15  left: 50%;
16  border: 0;
17  -webkit-transform: translateX(-50%);
18  -ms-transform: translateX(-50%);
19  transform: translateX(-50%);
20}

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

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

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

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

css
1.user-show-icon-cover {
2  position: relative;
3  height: 200px;
4  width: 200px;
5  border: 5px solid #000;
6  border-radius: 5px;
7  overflow: hidden;
8  box-sizing: border-box;
9}
10.user-show-icon-information 
11{
12  width: 100%;
13  height: 100%;
14}
15.user-show-icon-information a 
16{
17  display: block;
18  width: 100%;
19  height: 100%;
20  background-size: cover;
21  background-repeat: no-repeat;
22  background-position: center center;
23}