1

複数の画像を水平方向に積み重ねて配置し、自動サイズ変更して 2 行に分割しないようにしたいと考えています。この例では、両方の画像を合わせて 400px に収まるようにします。私はテーブルでこれを行うことができましたが、Firefoxではうまく機能しなかったので、正しい方法でやろうとしています. height:auto;max-width:100% の自動サイズ変更は、1 つの画像で機能します。これはコードです：

 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
<title>test</title>
<style>

    img {
        height:auto;
        max-width:100%;
        display:inline;
        float:left;
    }
</style>
</head>
<body>
<div style="border:1px solid red; width:400px;height:300px">
     <img src="img/test.jpg" width="800" height="100"/>
      <img src="img/test2.jpg" width="300" height="100" />
</div>

4

3 に答える 3

1

これはあなたが達成しようとしているものでなければなりません:

デモ

画像に withs と height を設定し、レイアウトを壊していたインライン スタイルをすべて削除し、次のCSSを追加しました。

img {
    height:auto;
    width:50%; /* specify 50% for 2 images, 33.33% for three images 25% for 4 images... */
    float:left;
}
于 2014-05-23T15:11:41.163 に答える
0

1 行に 2 つの画像を表示するには、CSS を に更新しますmax-width: 50%。max-width:49%50% でうまくいかない場合も試すことができます

于 2014-05-23T15:10:52.857 に答える
0

max-width:200px; で試してください。max-width:100% と言うと、画像がコンテナーの幅の 100% まで拡大できることを意味します。

于 2014-05-23T15:11:55.383 に答える