0

画像が入ったシンプルなコンテナがあります。

<div class="container" style="width:800px;">
     <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
</div>

imgスタイルを設定するとmax-width: 100%;、コンテナは幅を変更し、その中の画像を拡大縮小できます。完全。

ただし、コンテナ内にいくつかの画像がある場合はどうなりますか？そのようです。

<div class="container" style="width:800px; background:red;">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
</div>

上記のコードはスケーリングを実行せず、次の行にオーバーフローします-コンテナの高さを拡張します。

純粋なCSSで固定幅に合うように画像を均一に拡大縮小するにはどうすればよいですか？それも可能ですか？

サンドボックス：http ：//tinkerbin.com/ijy5zgH3

4

2 に答える 2

1

これは、HTML構造を変更する場合に機能します。

HTML：

<ul class="container" style="width:800px;">
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
</ul>

CSS：

img {max-width: 100%; }
li { display: table-cell; }

デモ

于 2012-11-15T22:23:48.940 に答える
1

理想的ではありませんが、その場合は、保持することはできますimg {max-width: 100%;}が、<table>

<table class="container" style="width:800px;">
    <tr>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
    </tr>
</table>
于 2012-11-15T22:28:53.867 に答える