htmlのimgについて

Question

htmlでホームページを作成しようとしています。
2048×1536pxの画像を200×150pxにしたいのですが上手くいきません。

<div><img src="images/photo2.jpeg" /></div>

のままだとまだちゃんと表示されるのですが、

<div　class="photo2"><img src="images/photo2.jpeg" /></div>

のようにdivにclass""を入れると画像以下のテキストが画像の上に乗ってしまいます(写真を見てください)。
このままだと画像のサイズを変えられません。

解決策お願いします。

Comments

[kei344]

全体のHTML/CSSを提示してください。

[zynu]

HTMLはあまり晒したくない情報が多数あるので、CSSのみになります。
#global_navi {
margin-bottom: 16px;
}

#global_navi ul {
list-style: none;
margin: 0;
padding: 0;
}

#global_navi ul li {
display: inline-block;
width: 164px;
text-align: center;
}

#global_navi ul li a {
display: block;
padding: 10px 16px;
background-color: #f0573e;
color: #fff;
text-decoration: none;
transition: background-color .2s linear;
}

.photo1{
margin: 0px;
padding: 0px;
}

.photo2{
height: 75px;
width: 100px;
float: left;
}

h2 {
color: #FF3333;
}

h4{
color: #FF367F;
}

[kei344]

（質問文は編集できます）HTMLの情報がないと、CSSが正しく設計されているかがわかりません。また、コードはここでなく質問文にコードブロックで追記していただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。（この「質問への追記・修正の依頼」の部分はデフォルトで表示されません）

[H40831]

晒したくない部分は消しても大丈夫ですよ。
HTMLとCSSがきちんとできているかがわかれば大丈夫です。
（ただし、消した部分に原因がある場合は誰も解決できなくなります。）

[yoshinavi]

＞2048×1536pxの画像を200×150pxにしたい
→ <img>内に希望の幅と高さを入れれば良いのでは？

Answer 1

divとclassの間に全角空白が入ってます。

CSSを中心にコードを提示してください。

float: left;

これ消してください。

Comments

[zynu]

すみません、自分で気づいて直したのですが意味はなかったです

[zynu]

#global_navi {
margin-bottom: 16px;
}

#global_navi ul {
list-style: none;
margin: 0;
padding: 0;
}

#global_navi ul li {
display: inline-block;
width: 164px;
text-align: center;
}

#global_navi ul li a {
display: block;
padding: 10px 16px;
background-color: #f0573e;
color: #fff;
text-decoration: none;
transition: background-color .2s linear;
}

.photo1{
margin: 0px;
padding: 0px;
}

.photo2{
height: 75px;
width: 100px;
float: left;
}

h2 {
color: #FF3333;
}

h4{
color: #FF367F;
}

[zynu]

消しましたが変わりません。

Answer 2

imgタグ自体にclassつけてheightとwidth指定したらできました。
divでimgを囲んでも、divが変化するだけでimgには効果を発揮してくれなかったみたいです