html - CSS は画像のスケーリングをどのように処理しますか?

Question

HTML 構造
`<dl onclick="goDetail(1)" class="cookbook-list">
<dt class="cookbook-img">
<img src="http://s1.cdn.xiangha.com/cai...
</dt>
<dd class="料理本名">ポークリブライス</dd>
<dd class="cookbook-des">陽を強化し、陽を強化し、陰に栄養を与え、腎臓に栄養を与え、気と血に栄養を与える</dd></dl>`
リーリー

img タグ内の画像が完全に表示されません。通常の比率に従って完全に表示するにはどうすればよいですか?解決してください。

Answer 1

パーセンテージ関係を使用する、原則: p>img，其中 p 标签为相对定位，高度为一个百分比，img 親オブジェクトを埋めるために絶対位置を使用する、コードは次のとおりです:

リーリー

幅は、ページに応じて、画面の幅または親コンテナの幅である必要があり、その親が自由に変形可能な場合は、その高さが比例関係に従って調整されます。比例的に。

Answer 2

img{
表示: ブロック;
最大幅: 100%;
}

Answer 3

背景付きの画像をロード
し、
background-size:contain
background-repeat:no-repeat

を設定します

Answer 4

画面サイズに応じて変化するremレイアウトを使用してください

Answer 5

スタイル img{width:100%;} を画像に追加します

Answer 6

• ページレイアウト

  リーリー

• 親要素の幅はパーセンテージまたは幅によって決定され、img が 100% に処理されると、親ウィンドウが自動的に埋められます。使用する場合はCSSスタイルを分けてください

img 要素は通常、主に操作と選択を容易にするためにボックスに含まれています。