画像の調整が一切できない。そもそもどうすれば画像の位置や大きさを調整できる？

画像の調整が一切できない。そもそもどうすれば画像の位置や大きさを調整できるのですか？
基本的な事のはずなのにできません。
画像が全く大きさが変わりません。headerには設定できたのですが。。。

widthについては基本的に、全体の幅を１００％として、それぞれの要素を
％で表現しなければなりません。

画像がなくてすみませんが、ご教示いただけますと幸いです。

そして、画像を調整できたとしても、
なんといいますか、実際の画像より高さを短くして幅を１００％とかにすると、
間延びして、画像の見た目が横に広がってしまいます。
見た目を変わらないように高さを設定して幅も全体の８０％にしたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head> 
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta name="description" content="サイトの説明文が入ります" />
7    <link rel="preconnect" href="https://fonts.gstatic.com" />
8    <link
9      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap"
10      rel="stylesheet"
11    />
12    <title>Document</title>
13    <link href="./css/ress.css" rel="stylesheet" />
14    <link href="./css/style.css" rel="stylesheet" />
15    <link
16      href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
17      rel="stylesheet"
18    />
19    <script
20      defer
21      src="https://use.fontawesome.com/releases/v5.15.3/js/all.js"
22      integrity="sha384-haqrlim99xjfMxRP6EWtafs0sB1WKcMdynwZleuUSwJR0mDeRYbhtY+KPMr+JL6f"
23      crossorigin="anonymous"
24    ></script>
25    <script defer src="./all.min.js"></script>
26    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
27  </head>
28  <body>
29      <div class="container">
30      <header class="l-header">
31          <div class="l-header-title">
32            Hamburger
33          </div>
34          <div class="l-header-imagebox">
35              <img class="l-header-image" src="images/mainvisual-pc.jpg" alt="ヘッダーの画像">
36          </div>
37          
38      </header>
39      
40      <main class="l-main">
41        main
42      </main>
43
44      <aside class="l-sidebar">
45        MENU
46      </aside>
47      <footer class="l-footer">
48        footer
49      </footer>
50
51
52    </div>
53      </body>
54      </html>

css
1
2
3.l-header {
4   
5    background-color: #FFF7EF;
6    width:80%;
7    height: 217px;
8    //display: flex;
9}
10.l-header-image{
11    margin-top:137px ;
12    height: 313px;
13    display: block;
14    width: 100%;
15    //max-width: 100%;
16    //height: auto;
17
18}
19.l-header-title{
20    font-size: 40px;
21    color: #707070;
22    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
23    font-weight: bold;
24
25}
26

行動規範の内容に同意します

回答1件

CSS
1.l-header-image{
2    width: 80%;
3    height: auto;
4    position: relative;
5    top: 30px;
6    left: 80px;
7}

あとは調整・工夫してください。

投稿2021/07/26 01:39

itagagaki

総合スコア8402

B_J

2021/07/26 01:46 編集

ありがとうございます。そのようにされた理由、意図を教えて下さいませ。ご説明もいただけると理解が深まります。あと、位置としましてはleftは０にして端から画像になるようにしましたが、大きさについてが全体の１００％に対して、８０％の幅になっておらず困っております。画像の高さももっと低くしたいんですが、低くすると構成比が変わって、画像の見た目が縮んで変な感じになってしまいます・・・そもそも、もとの画像の大きさにして、他の要素で「隠す」ってことにして作ったりすることもあるのでしょうか？