css - オーバーフローを防ぐために img を含む 2 列の div テーブルを取得する際の問題

Question

リストを作成しようとしています.2つのアイテムがあり、多くのアイテムがあります。div の内側には画像があり、この画像は div からはみ出してはいけないと言ったのに見えてしまいます。例はここにあります。

誰かがこれを私が望むようにフォーマットするのを手伝ってくれますか?

score 1 · Accepted Answer

overflowプロパティをに設定すると、コンテンツがこぼれるのをhidden防ぎます。div

.catalogentry {
    overflow: hidden;
}

あなたのコメントによると：

次に行う必要があるのは、それぞれimgを a div、たとえば classcontainでラップし、CSS で次のように指定することです。

.contain {
    height: /* max height you want */
    width: /* max width you want */
    overflow: hidden;
}

score 0 · Accepted Answer

overflow:hidden; で切り取る代わりに、img のサイズを変更してみてください。

このようなもの：

.catalogentry .itemImage img {
  max-width: auto;
  max-height: 80px;
}

読み込み時間を改善するために、画像のサイズ変更はサーバー側でより適切に処理されることに注意してください。ただし、それは別の話です...

2 に答える 2