makiyoshiya076
@makiyoshiya076

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

画像を緑の枠内に収めたい

解決したいこと

画像を緑の枠内に収めたい

発生している問題・エラー

<section class="left">
      <h2>left</h2>
      <div class="item-image">
        <img src="img/item.jpg" alt="">
      </div>
    </section>
.left {
  border: 5px solid #388e3c;
  flex: 1;
  width: 460px;
  height: 30em;
  margin: 20px 0;
}

.item-image {
  width: 100%;
}

スクリーンショット 2024-11-27 10.50.19.png

0

2Answer

以下のようにしてみてはいかがですか?

<h2>left</h2>
<div class="left">
    <img src="images/911GT2_1.jpg" class="item-image" alt="" />
</div>

結果は:

result.jpg

ちなみに、911GT2_1.jpg はサイズ 1280 x 1024 の jpg ファイルです。

0Like

Comments

  1. @makiyoshiya076

    Questioner

    スクリーンショット 2024-11-27 13.30.07.png
    ご提案くださりありがとうございます。補足しますと、left枠内に画像をはみ出さずに入れたいです。最初のご提案のコードははみ出してしまいます。そのほかに書く方法はありますか?

    <!DOCTYPE html>>
    <html lang="Ja">
    <head>
      <meta charset="UTF-8">
      <title>TOTALLY</title>
      <link rel="stylesheet" href="css/flame.css">
    </head>
    <body>
    <header>
      <h1>header</h1>
    </header>
    <main>
      <div id="item" class="wrapper">
        
        <section class="left">
          <h2>left</h2>
          
        </section>
        <section class="right">
          <h2>right</h2>
        </section>
      </div>
    </main>
    <footer>
      <h3>footer</h3>
    </footer>
    </body>
    </html>
    
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      margin: 0 auto;
      max-width: 960px;
      max-height: 678px;
      font-family: "Raleway", sans-serif;
    }
    
    header {
      border: 5px solid #388e3c;
      height: 5em;
      margin: 20px 20px 0;
    }
    
    main {
      margin: 0 20px; 
    }
    
    .wrapper {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    
    .left {
      border: 5px solid #388e3c;
      flex: 1;
      width: 460px;
      height: 30em;
      margin: 20px 0;
    }
    
    .item-image {
      width: 100%;
    }
    
    .right {
      border: 5px solid #388e3c;
      flex: 1;
      margin: 20px 0;
    }
    
    footer {
      border: 5px solid #388e3c;
      height: 5em;
      margin: 0 20px;
      height: 60px;
    }
    
    

    スクリーンショット 2024-11-27 13.08.02.png

  2. ↓ ここに img タグを class 指定付きで置けば、

    <section class="left">
      <h2>left</h2>
      <img src="img/item.jpg" class="item-image" alt="" />
    </section>
    

    質問者さんの css で以下のようになるはずです。ただし、section に適用されている class の reft で高さが 30em に固定されているので縦長の画像は下にはみ出ます。

    css1.jpg

    それはたぶん望む形ではないと思いますが、であれば、例えば class の reft で高さを指定しなければ下のようになります。

    css2.jpg

    どうしたいのか分かりませんが、ブラウザのディベロッパーツールを使っていろいろ試して臨む形を探してみてはいかがですか。

CSSに以下を追加してみてください。

  .item-image > img{
    max-width: 100%;
    max-height: 100%;
  }
0Like

Your answer might help someone💌