1
私はWeb Devを初めて使用しており、現在はHTMLとCSSを学習しています。私は、学習を続ける前にできることを100％できることを確かめるのが好きです。私はあまりにも愚かかもしれない何かにこだわっていますが、これで何時間も苦労しています。デフォルトサイズの画像を配置する
私がしたいことは、CSS（背景画像）を使用してウェブサイトに画像を追加することです。
これは私が使用しているコードです（私はCSSを使用しますが、質問のためにHTML内にHTML内に配置しました）。
<!DOCTYPE html>
<html>
<head>
<style>
.fml {
position: relative;
background-image: url("http://oi63.tinypic.com/z6be8.jpg");
background-repeat: no-repeat;
min-height: 100px;
width: 30%;
border: 1px solid;
}
.txt {
color: white;
position: absolute;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div class="fml">
<p class="txt">This is a random picture</p>
</div>
</body>
</html>
ここから分かるように、高さが100ピクセルに設定されているため、背景画像はわずかにしか表示されません。しかし、プログラムが自動的に画像のサイズを検出し、その画像が実際のサイズで表示されるまでその枠線を伸ばしたいのであればどうでしょうか？画像のサイズがわからないとどうなりますか？
その他の質問：テキストの位置は「下：0、左：0」ですが、左下に表示されていませんが、それはなぜですか？あなたの答えをありがとう！
PS：インデントして申し訳ありません、私は急いでいますので、ここにコードを正しくインデントする時間がありません。あなたの答えをもう一度ありがとう！
「div」に背景画像のサイズを独自のサイズとして使用させたい場合は、不可能です。要素が画像のサイズに基づいて固有のサイズを持つ唯一の方法は、 'img'要素を使うことです。一方、あなたのdivに背景画像を完全に表示したい場合は、 'background-size'の' cover'または 'contain'値を考えることができます。 – jcaron
ありがとうございます。はい、私はimg要素を使用すると、画像は完全に表示され、属性を指定する必要はないと考えました。残念ながら、img要素内に段落を追加することはできません。なぜなら、それは自己閉じタグであり子要素を持つことができないからです。imgタグを使用してイメージにテキストを追加することは不可能です（絶対位置を使用します）。とにかく、あなたの答えをありがとう、少なくとも私はそれが不可能であることを知っているので、私は新しいものを学ぶことができます。 –
'img'を' display'：inline-block'と 'position：relative'に' div'で囲みます。テキストを 'position：absolute'に設定します。 – jcaron