html - 画像を全幅に引き伸ばすことができません

Question

画面に合わせて背景画像を画面上で伸ばすのにかなりの時間を費やしてきたので、画像として追加するだけではありません。以下は、私が達成しようとしていることのイメージです。そのセクションのすべての CSS と HTML をクリアし、最初からやり直そうとしています。助けてくれてありがとう。www.jobspark.ca

Answer 1

親コンテナはすでに幅を 960px に固定しています。コンテナの幅を変更すると、デザイン全体に影響します。以下のコードを試してみてください。あなたのイメージを絶対的な位置にすると、伸ばすことができます

.image-block-outer-wrapper{
     height:338px;
 }
.image-block-wrapper{
     position:absolute:
     //align this div using margin
}
 .image-block-wrapper img{
  width:1200px;
   //or increase original image width by photoshop and set width here whatever you want
  }

Answer 2

画像をページの幅全体に引き延ばしたい場合、画像の高さを比例的に拡大してみてください -

.image-block-wrapper {
    width:100%;
    display:block;
}
.image-block-wrapper img {
    width:100%;
    height:auto;
}

「image-block-wrapper」要素が、幅が固定されている他の要素内にネストされていないことを確認してください。さらに、タグには幅と高さの属性を指定しないでください。