1

max-width:100%画像がdiv内に配置されている場合は機能しますが、liに追加すると機能しません。

こちらがデモです

しかし奇妙なことに、スタイルを.pro ul完全に削除すると機能します。ulのスタイルはUI部分を実行するために定義されているため、既存のスタイルをコードから削除することはできません。

PS-max-width:100%は、画像の元のサイズの範囲までのみ画像を拡大するために使用されます。width:100%は、私が望まないデバイスサイズに合うように画像を作成します。

このデモをチェックしてください。これは、ulリストでも機能させたい方法です。ウィンドウのサイズを変更して、どのように機能するかを確認できます。

4

2 に答える 2

1

これはあなたが望んでいたものですか?cssに以下の変更を加えました。

.pro ul{margin:0; padding:0;  list-style:none; width:100%; white-space: nowrap; overflow:hidden;}
.pro li{  display:block; margin:0; padding:0;  }
.pro li a {display:block}
.pro ul li img{     margin:0 auto; width:100%; max-width:100%}

アップデート:

この更新されたフィドルを確認してください。chromeとfirefoxをチェックすると、まったく同じような出力が得られます。または、使用しているブラウザを指定してください。

スタイルwidth:100%から削除しました.pro ul li img

更新2:

フィドルのスタイルoverflow:hidden;からプロパティを削除すると、期待どおりに機能します。ただし、CSSを編集する方法がない場合は、申し訳ありません。.pro ul

于 2012-12-26T08:48:52.860 に答える
0

私はそれを試してみました、そして私はそれを手に入れたと思います

このフィドルをチェックしてください

ここでポジショニングを使用しました..

 .pro ul li img{ position:absolute;}

配置を使用したくない場合は、ul タグからwidthおよびプロパティを削除します。white-space(理由はわかりませんが、削除すると機能しました)

 .pro ul{margin:0; padding:0;  list-style:none; overflow:hidden;  height:243px}

このフィドルをチェックしてください

于 2012-12-26T09:50:29.827 に答える