質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

imgのwidthが変わりません

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,041

miramikan

score 22

pic.jpgのwidthをもう少し広い幅に変えたいのですが、
htmlの方に直接<img src="pic.jpg" width="##" height="##">と書いても、cssの
.photoframe img に記載しても幅が変わりません。
もともと、photoframeをつけているのが原因でしょうか?
どうしたら、フレームをつけたまま、中の写真の幅が変えられるのか、お分かりになる方に教えていただきたいです。よろしくお願い致します。

        <p class="photo-title">####</p>


            <div class="whole-photo">
              <div class="box">

               <div id="photo01" class="photoframe">
                     <p class="photo">

                         <img src="pic".jpg" />

                     </p>
                    <p class="in"></p>
                 </div>


                 <div class="note" id="note">
                     <img src="pink.png" class="tape"/>
                      <div class="letters">
                      <p>#####</p>
                      <p>#######</p>
                     </div>
                 </div>


             </div>
  .main{
        width: 100%;
        height: 1000px;
        padding: 100px 0px;
        margin: 0px;
      }



    .photo-title{
     font-size:25px;
     margin-left:150px;
     border-bottom:3px solid #23c1ea;
     width:375px;
     max-width: 100%;
     height: auto;
    }

    .whole-photo{
      margin-left:70px;
      margin-top: 50px;
      position:relative;
    }


  .photoframe {
      position: relative;
      display: inline;
      float: left;
      width: 470px;
      height: 430px;
      overflow: hidden;
      margin: 0 10px 20px;
      margin-left:80px;
      padding: 15px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.3);
      text-align: center;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
      -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
      box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
      z-index: 1;
    }

    .photoframe .photo {
      width: 470px;
      height: 313px;
      overflow: hidden;
      margin: 0 0 10px;
      padding: 0;
      -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);ss
    }

    .photoframe img {
      position: relative;
      display: block;
      margin: 0;
      padding: 0;
      z-index: -1;
      width:470px;
      height:313px;

    }





    .box:after {
     content: ' ';
     clear: both;
     display: block;
           }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/06/29 17:41

    『pic.jpgのwidthを……<img src="pic.png"』とありますが、jpgとpngと、どちらのサイズを変えたいのでしょうか。

    キャンセル

  • Lhankor_Mhy

    2017/06/29 17:47

    あと、bodyのスタイルでかっこ閉じ忘れがありますので、ご確認ください。

    キャンセル

  • miramikan

    2017/06/29 19:13

    すみません!書き間違えで、jpgです!

    キャンセル

  • miramikan

    2017/06/29 19:42

    ご指摘ありがとうございます!

    キャンセル

回答 3

checkベストアンサー

+4

以下は質問文に掲載されている範囲のものをテンプレートに貼り付けたコードです。下にあるリストで出てくる行番号は以下のコードの行数と対応しています。どこを変えたのかなどを確認するときに参考にしてもらえたら嬉しいです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        body {
            width: 100%;
            margin: 0px;
            padding: 0px;

        main {
            width: 100%;
            height: 1000px;
            padding: 100px 0px;
            margin: 0px;

        }

        img {
            max-width: 100%;
            height: auto;
        }

        body {
            max-width: 100%;
            height: auto;
        }

        .photo-title {
            font-size: 25px;
            margin-left: 150px;
            border-bottom: 3px solid #23c1ea;
            width: 375px;
            max-width: 100%;
            height: auto;
        }

        .whole-photo {
            margin-left: 70px;
            margin-top: 50px;
            position: relative;
        }

        .photoframe {
            position: relative;
            display: inline;
            float: left;
            width: 340px;
            height: 430px;
            overflow: hidden;
            margin: 0 10px 20px;
            margin-left: 80px;
            padding: 15px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.3);
            text-align: center;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .photoframe .photo {
            width: 340px;
            height: 385px;
            overflow: hidden;
            margin: 0 0 10px;
            padding: 0;
            -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .photoframe img {
            position: relative;
            display: block;
            margin: 0;
            padding: 0;
            z-index: -1;
            width: 500px;
            height: 359px;
        }

        .tape {
            position: relative;
            bottom: 30px;
            left: 30px;
        }

        .note {
            width: 390px;
            height: 460px;
            float: right;
            margin-right: 160px;
            position: relative;
            background-color: #ffffe7;
            background-image: linear-gradient(rgba(241, 207, 164, 0.5) .1em, transparent .1em);
            background-size: 100% 1.5em;
            line-height: 1.5em;
            max-width: 100%;

        }

        #note {
            -moz-transform: rotate(-4deg);
            -webkit-transform: rotate(-4deg);
        }

        .in {
            padding-bottom: 20px;
            font-size: 28px;
            margin-top: 5px;

        }

        .letters {
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 28px;
            line-height: 130%;
        }

        .box:after {
            content: ' ';
            clear: both;
            display: block;
        }

        }
    </style>
</head>
<body>
<div class="main">
    <p class="photo-title">####
    <p>
        <div class="whole-photo">
            <div class="box">
                <div id="photo01" class="photoframe">
    <p class="photo">
        <img src="pic" .jpg"/>
    </p>
    <p class="in"></p>
</div>
<div class="note" id="note">
    <img src="pink.png" class="tape"/>
    <div class="letters">
        <p>#####</p>
        <p>#######</p>
    </div>
</div>
</div>
</body>
</html>
  • 7行目、bodyについて右中括弧がありません。
  • 135行目、不要な右中括弧があります。
  • 139行目、p要素はフレージングコンテンツのみしか子要素として持つことはできません。
  • 139行目、p要素に対応する終了タグがありません(p要素に終了タグを補完)。
  • 140行目、p要素はフレージングコンテンツのみしか子要素として持つことはできません。
  • 140行目、p要素に対応する終了タグがありません(p要素を削除)。
  • 141行目、div要素に対応する終了タグがありません(div要素に終了タグを補完)。
  • 142行目、div要素に対応する終了タグがありません(div要素に終了タグを補完)。
  • 143行目、div要素に対応する終了タグがありません(div要素に終了タグを補完)。
  • 145行目、src属性のダブルクォーテーションの対応が適切ではありません。
  • 156行目、不要なdiv要素があります(今回は削除しました)。

本題

pic.jpgとフレームの横幅をブラウザウィンドウの幅によって変化させたいということであれば、widthの値を%で指定すると良いと思います。今回はpic.jpgとフレームの横幅だけではなくmarginpaddingについても横幅に関するものはパーセント指定に変更しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        body {
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        main {
            width: 100%;
            height: 1000px;
            padding: 100px 0px;
            margin: 0px;

        }

        img {
            max-width: 100%;
            height: auto;
        }

        body {
            max-width: 100%;
            height: auto;
        }

        .photo-title {
            font-size: 25px;
            margin-left: 7.9%;
            border-bottom: 3px solid #23c1ea;
            width: 19.7%;
            max-width: 100%;
            height: auto;
        }

        .whole-photo {
            margin-left: 3.7%;
            margin-top: 50px;
            position: relative;
        }

        .photoframe {
            position: relative;
            display: inline;
            float: left;
            width: 17.9%;
            height: 430px;
            overflow: hidden;
            margin: 0 0.5% 20px;
            margin-left: 4.2%;
            padding: 15px 0.8% 15px 0.8%;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.3);
            text-align: center;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .photoframe .photo {
            width: 100%;
            height: 385px;
            overflow: hidden;
            margin: 0 0 10px;
            padding: 0;
            -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .photoframe img {
            position: relative;
            display: block;
            margin: 0;
            padding: 0;
            z-index: -1;
            width: 100%;
            height: 359px;
        }

        .tape {
            position: relative;
            bottom: 30px;
            left: 30px;
        }

        .note {
            width: 20.5%;
            height: 460px;
            float: right;
            margin-right: 8.4%;
            position: relative;
            background-color: #ffffe7;
            background-image: linear-gradient(rgba(241, 207, 164, 0.5) .1em, transparent .1em);
            background-size: 100% 1.5em;
            line-height: 1.5em;
            max-width: 100%;

        }

        #note {
            -moz-transform: rotate(-4deg);
            -webkit-transform: rotate(-4deg);
        }

        .in {
            padding-bottom: 20px;
            font-size: 28px;
            margin-top: 5px;

        }

        .letters {
            padding-top: 10px;
            padding-left: 1.1%;
            padding-right: 1.1%;
            font-size: 28px;
            line-height: 130%;
            overflow-wrap: break-word;
        }

        .box::after {
            content: ' ';
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
<div class="main">
    <p class="photo-title">テキスト</p>
    <div class="whole-photo">
        <div class="box">
            <div id="photo01" class="photoframe">
                <p class="photo">
                    <img src="https://placehold.jp/3d4070/ffffff/500x359.png?text=pic.jpg">
                </p>
                <p class="in">テキスト</p>
            </div>

            <div class="note" id="note">
                <img src="pink.png" class="tape">
                <div class="letters">
                    <p>テキスト</p>
                    <p>テキストテキスト</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/30 09:00

    詳しく書いていただいてありがとうございます!助かりました!!

    キャンセル

+3

  • HTMLで<div>の閉じタグの数が合っていません。
  • CSSでbodyが閉じられていません。
  • .photoframe imgでwidthを設定していますが、img { max-width: 100% }が掛かっているのでこのままでは画像の元サイズ以上には広がりません。

CSSやHTMLの基本を確認しつつ一つずつ確認してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/29 19:37

    ご指摘ありがとうございます。修正いたしました。
    img { max-width: 100% }を消しても、画像の大きさが変わらないのですが、何か他に問題がございますでしょうか?何度も申し訳ありません。

    キャンセル

+1

<p>タグが閉じてなかったり、cssのbodyの閉じ括弧が一番後ろに来ちゃったり・・・
色々おかしいですけど、大丈夫ですか?

chromeなどのデベロッパーツールで確認すると分かりますよ。
imgmax-width100%になっているので親要素の大きさを変えないと、変わりません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/29 19:38

    初歩的なミスのご指摘ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る