imgのwidthが変わりません

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

HTML
1  
2        <p class="photo-title">####</p>
3
4
5            <div class="whole-photo">
6              <div class="box">
7
8               <div id="photo01" class="photoframe">
9                     <p class="photo">
10
11                         <img src="pic".jpg" />
12
13                     </p>
14                    <p class="in"></p>
15                 </div>
16
17
18                 <div class="note" id="note">
19                     <img src="pink.png" class="tape"/>
20                      <div class="letters">
21                      <p>#####</p>
22                      <p>#######</p>
23                     </div>
24                 </div>
25
26
27             </div>
28
29

CSS
1
2  .main{
3        width: 100%;
4        height: 1000px;
5        padding: 100px 0px;
6        margin: 0px;
7      }
8
9
10
11    .photo-title{
12     font-size:25px;
13     margin-left:150px;
14     border-bottom:3px solid #23c1ea;
15     width:375px;
16     max-width: 100%;
17     height: auto;
18    }
19
20    .whole-photo{
21      margin-left:70px;
22      margin-top: 50px;
23      position:relative;
24    }
25
26
27  .photoframe {
28      position: relative;
29      display: inline;
30      float: left;
31      width: 470px;
32      height: 430px;
33      overflow: hidden;
34      margin: 0 10px 20px;
35      margin-left:80px;
36      padding: 15px;
37      background: #ffffff;
38      border: 1px solid rgba(0, 0, 0, 0.3);
39      text-align: center;
40      -webkit-border-radius: 2px;
41      -moz-border-radius: 2px;
42      border-radius: 2px;
43      -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
44      -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
45      box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
46      z-index: 1;
47    }
48
49    .photoframe .photo {
50      width: 470px;
51      height: 313px;
52      overflow: hidden;
53      margin: 0 0 10px;
54      padding: 0;
55      -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
56      -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
57      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);ss
58    }
59
60    .photoframe img {
61      position: relative;
62      display: block;
63      margin: 0;
64      padding: 0;
65      z-index: -1;
66      width:470px;
67      height:313px;
68
69    }
70
71    
72
73
74
75    .box:after {
76     content: ' ';
77     clear: both;
78     display: block;
79           }
80
81  
82
83

Lhankor_Mhy

2017/06/29 08:41

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

Lhankor_Mhy

2017/06/29 08:47

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

miramikan

2017/06/29 10:13

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

miramikan

2017/06/29 10:42

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

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

回答3件

ベストアンサー

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        body {
8            width: 100%;
9            margin: 0px;
10            padding: 0px;
11
12        main {
13            width: 100%;
14            height: 1000px;
15            padding: 100px 0px;
16            margin: 0px;
17
18        }
19
20        img {
21            max-width: 100%;
22            height: auto;
23        }
24
25        body {
26            max-width: 100%;
27            height: auto;
28        }
29
30        .photo-title {
31            font-size: 25px;
32            margin-left: 150px;
33            border-bottom: 3px solid #23c1ea;
34            width: 375px;
35            max-width: 100%;
36            height: auto;
37        }
38
39        .whole-photo {
40            margin-left: 70px;
41            margin-top: 50px;
42            position: relative;
43        }
44
45        .photoframe {
46            position: relative;
47            display: inline;
48            float: left;
49            width: 340px;
50            height: 430px;
51            overflow: hidden;
52            margin: 0 10px 20px;
53            margin-left: 80px;
54            padding: 15px;
55            background: #ffffff;
56            border: 1px solid rgba(0, 0, 0, 0.3);
57            text-align: center;
58            -webkit-border-radius: 2px;
59            -moz-border-radius: 2px;
60            border-radius: 2px;
61            -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
62            -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
63            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
64            z-index: 1;
65        }
66
67        .photoframe .photo {
68            width: 340px;
69            height: 385px;
70            overflow: hidden;
71            margin: 0 0 10px;
72            padding: 0;
73            -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
74            -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
75            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
76        }
77
78        .photoframe img {
79            position: relative;
80            display: block;
81            margin: 0;
82            padding: 0;
83            z-index: -1;
84            width: 500px;
85            height: 359px;
86        }
87
88        .tape {
89            position: relative;
90            bottom: 30px;
91            left: 30px;
92        }
93
94        .note {
95            width: 390px;
96            height: 460px;
97            float: right;
98            margin-right: 160px;
99            position: relative;
100            background-color: #ffffe7;
101            background-image: linear-gradient(rgba(241, 207, 164, 0.5) .1em, transparent .1em);
102            background-size: 100% 1.5em;
103            line-height: 1.5em;
104            max-width: 100%;
105
106        }
107
108        #note {
109            -moz-transform: rotate(-4deg);
110            -webkit-transform: rotate(-4deg);
111        }
112
113        .in {
114            padding-bottom: 20px;
115            font-size: 28px;
116            margin-top: 5px;
117
118        }
119
120        .letters {
121            padding-top: 10px;
122            padding-left: 20px;
123            padding-right: 20px;
124            font-size: 28px;
125            line-height: 130%;
126        }
127
128        .box:after {
129            content: ' ';
130            clear: both;
131            display: block;
132        }
133
134        }
135    </style>
136</head>
137<body>
138<div class="main">
139    <p class="photo-title">####
140    <p>
141        <div class="whole-photo">
142            <div class="box">
143                <div id="photo01" class="photoframe">
144    <p class="photo">
145        <img src="pic" .jpg"/>
146    </p>
147    <p class="in"></p>
148</div>
149<div class="note" id="note">
150    <img src="pink.png" class="tape"/>
151    <div class="letters">
152        <p>#####</p>
153        <p>#######</p>
154    </div>
155</div>
156</div>
157</body>
158</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とフレームの横幅だけではなくmarginやpaddingについても横幅に関するものはパーセント指定に変更しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        body {
8            width: 100%;
9            margin: 0px;
10            padding: 0px;
11        }
12
13        main {
14            width: 100%;
15            height: 1000px;
16            padding: 100px 0px;
17            margin: 0px;
18
19        }
20
21        img {
22            max-width: 100%;
23            height: auto;
24        }
25
26        body {
27            max-width: 100%;
28            height: auto;
29        }
30
31        .photo-title {
32            font-size: 25px;
33            margin-left: 7.9%;
34            border-bottom: 3px solid #23c1ea;
35            width: 19.7%;
36            max-width: 100%;
37            height: auto;
38        }
39
40        .whole-photo {
41            margin-left: 3.7%;
42            margin-top: 50px;
43            position: relative;
44        }
45
46        .photoframe {
47            position: relative;
48            display: inline;
49            float: left;
50            width: 17.9%;
51            height: 430px;
52            overflow: hidden;
53            margin: 0 0.5% 20px;
54            margin-left: 4.2%;
55            padding: 15px 0.8% 15px 0.8%;
56            background: #ffffff;
57            border: 1px solid rgba(0, 0, 0, 0.3);
58            text-align: center;
59            -webkit-border-radius: 2px;
60            -moz-border-radius: 2px;
61            border-radius: 2px;
62            -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
63            -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
64            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
65            z-index: 1;
66        }
67
68        .photoframe .photo {
69            width: 100%;
70            height: 385px;
71            overflow: hidden;
72            margin: 0 0 10px;
73            padding: 0;
74            -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
75            -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
76            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
77        }
78
79        .photoframe img {
80            position: relative;
81            display: block;
82            margin: 0;
83            padding: 0;
84            z-index: -1;
85            width: 100%;
86            height: 359px;
87        }
88
89        .tape {
90            position: relative;
91            bottom: 30px;
92            left: 30px;
93        }
94
95        .note {
96            width: 20.5%;
97            height: 460px;
98            float: right;
99            margin-right: 8.4%;
100            position: relative;
101            background-color: #ffffe7;
102            background-image: linear-gradient(rgba(241, 207, 164, 0.5) .1em, transparent .1em);
103            background-size: 100% 1.5em;
104            line-height: 1.5em;
105            max-width: 100%;
106
107        }
108
109        #note {
110            -moz-transform: rotate(-4deg);
111            -webkit-transform: rotate(-4deg);
112        }
113
114        .in {
115            padding-bottom: 20px;
116            font-size: 28px;
117            margin-top: 5px;
118
119        }
120
121        .letters {
122            padding-top: 10px;
123            padding-left: 1.1%;
124            padding-right: 1.1%;
125            font-size: 28px;
126            line-height: 130%;
127            overflow-wrap: break-word;
128        }
129
130        .box::after {
131            content: ' ';
132            clear: both;
133            display: block;
134        }
135    </style>
136</head>
137<body>
138<div class="main">
139    <p class="photo-title">テキスト</p>
140    <div class="whole-photo">
141        <div class="box">
142            <div id="photo01" class="photoframe">
143                <p class="photo">
144                    <img src="https://placehold.jp/3d4070/ffffff/500x359.png?text=pic.jpg">
145                </p>
146                <p class="in">テキスト</p>
147            </div>
148
149            <div class="note" id="note">
150                <img src="pink.png" class="tape">
151                <div class="letters">
152                    <p>テキスト</p>
153                    <p>テキストテキスト</p>
154                </div>
155            </div>
156        </div>
157    </div>
158</div>
159</body>
160</html>