HTML,CSSの画像の背景カラーについて

Question

HTML、CSSにおいて、画像を横に伸ばし、その画像の横幅にプラウザいっぱいまで背景カラーをつけたいです。ポジションを使わず、縦は、画像の大きさと一緒を希望しております。```

<div class="sample"> <div class="photo"><img src="hoge.jpg" width="1000" height="200" alt=""/></div>

コード HTML

.sample {
width: 1000px;
margin: 0 auto;
}

.photo {
background: #000000
	}

コード CSS

このバックグラウンド指定の仕方だと画像の横のみにならず、上にも出ます。また画像はコーディングの途中から入ります。

Answer 1

説明とコードから下記のような仕様と類推しました。

1. 画像の横幅は1000px、高さは画像そのものの高さ
2. 画像はブラウザの幅に対してセンタリング
3. 画像の左右にブラウザの幅いっぱいに背景色

これであってますか。
もし、そうなら、下記のようなコードでどうでしょう。

<div class="sample">
	<div class="photo">
		<img src="Accdb.JPG" width="100%" alt="">
	</div>
</div>

.sample {
	background: #000000;
}

.photo {
	width: 1000px;
	margin: 0 auto;
}

.photo img {
	display: block;
}

解説
背景色は、上位ブロック（sample）に設定。
下位ブロック(photo)で横幅を設定、margin: 0 auto; でセンタリング。

これだけでは、画像の下に余白で出ます。
これは、画像(img)がインライン要素のため、ベースラインに配置されるためです。
display: block; でブロック要素にすることで、余白は出なくなります。

HTML の img で、width="100%" とすることで、cssで指定した横幅に合わせます。

Answer 2

画像は1000pxに引き伸ばす。ブラウザは1000px以上を想定していて、余った部分に背景色を表示したい。
但し背景色が画像の上下に表示されるのはNGってことですね。

上にも出ます。

上には少しだけですか？また下には出ていませんか？
photoにpadding、又はimgにmarginが効いているか、もしくは.photoの縦幅が画像より大きく設定されているかではないでしょうか？

.sample {
        margin: 0 auto;
}
.photo {
    background: #000000;
    width:100%;
    height:200px;
    margin:0;
    padding:0;
    overflow:hidden;
}
img {
    margin:0;
    padding:0;
}

とりあえず、これだとどうでしょうか？
※不要な設定もあるかも知れません
※対象ブラウザや利用可能なCSS,HTMLのバージョンが不明です。

Answer 3

画像を横に伸ばし

<img src="hoge.jpg" width="100%" />

で良いのではないでしょうか。

その画像の横幅にプラウザいっぱいまで背景カラーをつけたい

<div class="wrapper">
	<img src="hoge.jpg" width="100%" />
</div>

というDOM構造だった場合、

.wrapper {
	background: #f00;
}

で良いのではないでしょうか。

---

質問が漠然としているので、上記のような回答になってしまいますが申し訳ありません。
よろしければそちらの想定しているコードを記述して頂ければと思います。
お手数ですが、宜しくお願い致します。

Answer 4

質問が漠然としているので、上記のような回答になってしまいますが申し訳ありません。
よろしければそちらの想定しているコードを記述して頂ければと思います。

コードの詳細の追記ありがとうございます。

ざっくりと見た感じですが、hirohiroさん, hatena19さんの回答で、ご希望の動作はするように思われます。
ご確認のほど宜しくお願いします。