html上の表のセルに貼り付け並べた画像のサイズを揃えたいです。各画像の縦横比はほぼ同じですが、それぞれの大きさには微妙なズレがあります。

前提・実現したいこと

html上の表のセルに貼り付け並べた画像のサイズを揃えたいです。
各画像の縦横比はほぼ同じですが、それぞれのサイズには微妙なズレがあります。

該当のソースコード

html
1<html>
2  <head>
3    <title>test</title>
4    <link rel="stylesheet" href="./css/style_tera.css">
5  </head>
6  <body>
7
8    <form name="form1">
9      <table class="picTable">
10        <tr>
11          <td><img class="pic_img" src="http://placehold.jp/346x170.png"></td>
12          <td><img class="pic_img" src="http://placehold.jp/346x183.png"></td>
13          <td><img class="pic_img" src="http://placehold.jp/340x164.png"></td>
14        </tr>
15      </table>
16    </form>
17  </body>
18</html>
19

css
1.picTable {
2  width: 100%;
3}
4td{
5  width: 15%;
6  padding-top: 7.5%;
7  position: relative;
8}
9.pic_img {
10  position: absolute;
11  width: 100%;
12  height: 100%;
13  top: 0;
14  left: 0;
15}

試したこと

現時点では
①表のセルの幅を指定(15%)
②画像の幅を指定(100%)
として大体は揃って見えるのですが、
ものによってわずかに縦が短かったりするため不揃いなのがわかります。

画像の大まかな縦横比は2:1のため
.pic_imgの中でheight:width*0.5などと指定したいところですがうまくいきませんでした。

大きさを揃える際に高さがわずかに大きい、又は小さい部分については
わずかな誤差で歪みもそれほど生じないかと思うので伸縮し揃えたいです。

当方html,cssの初心者のためお手数おかけして申し訳ございませんが、
皆様のアドバイスいただけましたら幸いです。
何卒宜しくお願い致します。

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

回答1件

ベストアンサー

下記でどうでしょうか。

css
1table {
2  width: 100%;
3  border: 1px solid;
4}
5td{
6  width:15%;
7  position: relative;
8}
9td::before {
10  content: "";
11  display: block;
12  width: 100%;
13  padding-top: 50%;
14}
15.pic_img {
16  position: absolute;
17  width: 100%;
18  height: 100%;
19  top: 0;
20  left: 0;
21  object-fit: cover;
22}

CodePenサンプル

画像の親要素(td)の padding-top を高さを縦横比に合わせて設定します。
縦横比 2:1 なら幅15% * (1 / 2) = 7.5% と計算します。
画像の親要素(td)の疑似要素に padding-top で高さを設定する方法で縦横比を設定します。
縦横比 2:1 なら 50% にします。
画像は絶対配置にして object-fit で伸縮による歪を防ぎます。

object-fit はIEは非対応ですので、IEにも対応させたいなら、画像は background-image で表示させるといいでょしう。

大きさを揃える際に高さがわずかに大きい、又は小さい部分については

わずかな誤差で歪みもそれほど生じないかと思うので伸縮し揃えたいです。

ということなら、object-fit のIE非対応は無視できますね。

投稿2020/12/21 01:02

編集2020/12/21 06:29

hatena19

総合スコア33790

20200713

2020/12/21 05:47

ご回答いただきありがとうございます！アドバイスいただいた通りに記述すると全ての画像のサイズが揃ったのですが、縦横比が2:1というより3:1又は4:1のような様子です。 tdのwidthとpadding-topを設定するあたりについてもう少し詳しくお伺いすることはできませんでしょうか…！

hatena19

2020/12/21 06:14 編集

回答のコードを変更しました。サンプルのリンクを追加しましたので、ご確認ください。

20200713

2020/12/21 06:20

変更前のサンプルリンクも拝見し2:1になっているのを確認させていただいたのですが、やはり私の方では比率が正しく表示されませんでした。(質問のコード変更致しました！) しかしながら、ご提示いただいた変更後のコードで無事うまく表示することができました！前半うまくいかなかった理由はわからないのですが、一先ず希望通りのものになりました。詳しくお教えくださりありがとうございました！

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