ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSで画像の高さを自動的に変更せず、幅と長さを制限するにはどうすればよいですか? _html/css_WEB-ITnose
画像の高さは画像の高さに応じて変化します。つまり、幅に制限はありません。幅を 1200PX に設定するか、ブラウザーを自動的に超えるかの 2 つの効果があります。
希望する効果は 2 つあります。 1 つ目は、画像に合わせて幅と長さが変化することです。幅が 1500PX を超えると、ブラウザの下にフレームが表示され、水平方向に引っ張ることができます。こちらの方が難しそうです。
2 番目の方法は、画像の幅を 1200PX に変更し、高さは変更しません。
しかし、私が書いたものは効果がないことがわかりました、 DEDE 呼び出しコード:
<DIV class=col_main4><DIV class=gallery_list5><DIV id=mainNewsTitles><H1>{dede:field.title/}</H1></DIV><DIV class=contentbox><DIV class=mainNewsInfo>作者:{dede:field.writer/} 发布时间:{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}</DIV><div align="center"></div><DIV class=NewsContent>{dede:field.body/}<p class="textpage" align="center">{dede:pagebreak/}</p><p></p>
.col_main4 img{ width: 1200px;}.gallery_list5 img{ BORDER-RIGHT: #dfdfdf 1px solid; MARGIN-TOP: 10px; FONT-SIZE: 12px; OVERFLOW: hidden; width: 1200px;}
投稿者には、あなたの投稿の効率を改善する権利があります。そうしないと、今後誰かが答えてくれなくなります
CSS は幅を制限します。画像を width:1200px; に制限してください。
画像の親要素または祖先要素が 1200 未満の幅を定義し、OVERFLOW: hidden; を使用する場合、その子要素は幅 1200 を超える限り非表示になります。
.col_main4 img{
width: 1200px;
BORDER-RIGHT: #dfdfdf 1px ソリッド; FONT-SIZE: 12px;
幅: 1200ピクセル;
}
は画像の幅を 1200PX と定義していますが、画像は 1200PX に縮小されないため、効果がありません。 {dede:field.body/} は、記事のコンテンツ
.NewsContent { MARGIN: 5px; LINE-HEIGHT: 120%; TEXT-ALIGN: center;}.NewsContent IMG { BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none; width:1200px;}
width:1200px;height:auto;overflow:hidden; を追加しても、この画像をコンテナ {dede:field. body/} タグは記事のテキストを呼び出します。このため、CSS では次のように記述されます。
BORDER-TOP-STYLE: none; -LEFT -STYLE: none; BORDER-
BOTTOM-STYLE: none; width:1200px;height:auto;overflow:hidden;
NewsContent IMG が {dede:field の画像を取得できなかったかどうかはわかりません.body/} には効果があります。
私の現在の考えは非常に混乱しています。アドバイスをお願いします。ありがとうございます。
コンテナを使用してこの画像をラップし、コンテナの幅を固定幅に設定し、高さを自動に設定してから、画像を任意に設定できます。サイトにメッセージを送信する方法がわかりません
投稿者には投稿の効率を向上させる権利があります。そうでなければ誰も助けてくれません。将来的には質問に答えてください。
お手伝いしたいのですが、HTML コードが不完全で実際の効果がわかりません。
最大幅=xx;
最大高さ=xx;