解決したいこと
3000 × 1983の画像をwebページの一番上に背景として貼り付け、横幅いっぱいに表示させたいのですが、
画像の一部をトリミングして表示されてしまいます。どうしたら良いか教えていただきたいです。
表示させたいのは下の写真です。
試したこと
HTML
1<div id="container"> 2 <div id="main_img"> 3 <div id="main_img_inner"> 4 <h1>時のはざまでほっとひといき</h1> 5 </div> 6 </div> 7</div>
CSS
1body{ 2 width:100%; 3 font-family: "Hiragino sans",sans-serif; 4 color:pink; 5} 6#container{ 7 width: 970px; 8 margin:0 auto; 9} 10#main_img{ 11 display: table; 12} 13#main_img_inner{ 14 width:1440px; 15 height:1020px; 16 background: url("./images/cafe_main.jpg") no-repeat; 17}
このように表示されます。
{
width: 100%;
height: auto;
}
だと画像は全く表示されませんでした。
縦横比が変わるわけではなく
このようにトリミングされてしまうのは何故でしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/03 02:13