17156


リキッドレイアウトでHTMLを組んだ際に、画像サイズも自動的に縮小されて欲しいと思い、widthにパーセンテージを指定しました。  
幅の異なる画像を隙間なく並べた場合に、縮尺の関係から縦幅がずれてしまい見栄えがよくありません。  
この現象を解消したいのですが良い方法はありますでしょうか。  
全体的にリキッドレイアウトにしたいので、heightに具体的なサイズを指定することはできません。  
以下が当該箇所のHTMLです。よろしくお願いいたします。

[code]

    <table cellpadding="0" cellspacing="0" border="0" height="100%" width="95%" bgcolor="#FFF" style="border-collapse:collapse;">
    <tr>
    <td>
    <!-- wrapper : start -->
    <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="max-width:700px; margin:auto;" class="email-container">
    <tr>
        <td>
    
            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td width="49%" style="vertical-align:top; font-size:0; line-height:0;">
                        <img  width="100%"  src="img/left.jpg" style="display: block;" alt="LEFT">
                    </td>
                    <td width="51%" style="vertical-align:top; font-size:0; line-height:0;">
                        <img  width="100%" src="img/right.jpg" style="display: block;" alt="RIGHT">
                    </td>
                </tr>
            </table>
    
        </td>
    </tr>    
    </table>
    <!-- wrapper : end -->
    </td>
    </tr>
    </table>
    
[/code]


CC BY-SA 3.0
2015-09-30T10:52:09.853
17105
2015-10-02T00:27:42.643
12507
question
html css
リキッドレイアウト × 幅の異なる画像 × 横並び の場合の高さの調整方法


以下、一例です。

[code]

    body,
    ul,
    li {
      margin: 0;
      padding: 0;
    }
    ul.liquid {
      list-style-type: none;
      font-size: 0;
    }
    ul.liquid li {
      display: inline-block;
      width: 25vw;
      height: 25vw;
      overflow: hidden;
    }
    ul.liquid li a {
      width: 100%;
      height: 100%;
      font-size: initial;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    ul.liquid li {
      position: relative;
    }
    ul.liquid li >* {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
[/code]

[code]

    <ul class="liquid">
      <li><a href="http://lorempixel.com/187/191" style="background-image:url(http://lorempixel.com/187/191)"></a> </li>
      <li><a href="http://lorempixel.com/191/117" style="background-image:url(http://lorempixel.com/191/117)"></a> </li>
      <li><a href="http://lorempixel.com/182/123" style="background-image:url(http://lorempixel.com/182/123)"></a> </li>
      <li><a href="http://lorempixel.com/199/187" style="background-image:url(http://lorempixel.com/199/187)"></a> </li>
      <li><a href="http://lorempixel.com/109/119" style="background-image:url(http://lorempixel.com/109/119)"></a> </li>
      <li><a href="http://lorempixel.com/196/173" style="background-image:url(http://lorempixel.com/196/173)"></a> </li>
      <li><a href="http://lorempixel.com/193/154" style="background-image:url(http://lorempixel.com/193/154)"></a> </li>
      <li><a href="http://lorempixel.com/130/163" style="background-image:url(http://lorempixel.com/130/163)"></a> </li>
      <li><a href="http://lorempixel.com/136/128" style="background-image:url(http://lorempixel.com/136/128)"></a> </li>
      <li><a href="http://lorempixel.com/176/118" style="background-image:url(http://lorempixel.com/176/118)"></a> </li>
      <li><a href="http://lorempixel.com/125/138" style="background-image:url(http://lorempixel.com/125/138)"></a> </li>
      <li><a href="http://lorempixel.com/197/146" style="background-image:url(http://lorempixel.com/197/146)"></a> </li>
      <li><a href="http://lorempixel.com/136/149" style="background-image:url(http://lorempixel.com/136/149)"></a> </li>
      <li><a href="http://lorempixel.com/108/178" style="background-image:url(http://lorempixel.com/108/178)"></a> </li>
      <li><a href="http://lorempixel.com/179/157" style="background-image:url(http://lorempixel.com/179/157)"></a> </li>
      <li><a href="http://lorempixel.com/131/186" style="background-image:url(http://lorempixel.com/131/186)"></a> </li>
      <li><a href="http://lorempixel.com/120/135" style="background-image:url(http://lorempixel.com/120/135)"></a> </li>
      <li><a href="http://lorempixel.com/146/164" style="background-image:url(http://lorempixel.com/146/164)"></a> </li>
      <li><a href="http://lorempixel.com/131/156" style="background-image:url(http://lorempixel.com/131/156)"></a> </li>
      <li><a href="http://lorempixel.com/181/170" style="background-image:url(http://lorempixel.com/181/170)"></a> </li>
    </ul>
[/code]

単位`vw`は[Android4.3以下で動作しないので](http://caniuse.com/#feat=viewport-
units)、サポートしたい場合は`px`などの固定値をjavascriptで動的に書き換える、などの対応が必要です。

> 参考:

  * [CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。 | 横浜でWeb制作を行うシーブレインスタッフによる技術情報ブログ](http://bashalog.c-brains.jp/14/08/06-100100.php)
  * [html - Scale image to fit a bounding box - Stack Overflow](https://stackoverflow.com/questions/9994493/scale-image-to-fit-a-bounding-box)


CC BY-SA 3.0
2015-10-02T00:15:06.697
17156
2015-10-02T00:27:42.643
2017-05-23T12:38:55.307
-1
9834
17105
answer