htmlで画像を貼り付け、サイズを指定したいけど上手くいかない。考えられる問題点を教えてください。

htmlで画像を貼り付け、サイズを指定したいです。

### 発生している問題・エラーメッセージ
<img src="photo_money1.jpg" alt="お金" wigth="100" height="100">
で読み込むと表示はされるものの、とても大きく画面の端から端までの写真になります。どこを見直したらいいかわかりません。考えられる問題点があれば教えていただきたいです。

### 試したこと
写真の大きさがもともと6000x4000だったからかと思い、640x427にしてみたもののやはり大きいままです。
/100x100の入力方法も試しました。

違うhtmlのファイルで
<img src="https://source.unsplash.com/random/100x100" alt="">
の時はサイズを変えれたのですが、今回は上手くできなくて。


### 補足情報（FW/ツールのバージョンなど）
初心者なのでよくわからないのですが、写真やロゴをサイズなど編集してからimgに入れますか？
とりあえず使いたい写真を貼り付けてhtmlでサイズ変更しますか？
htmlに貼り付け、とりあえずサイズを小さくして、cssで他の写真とサイズを合わせたりしていきますか？cssのみ使ってサイズを変えますか？

皆さんがどうやって写真を入れているか流れも教えていただけたら嬉しいです。

エラーメッセージ
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>◯◯不動産</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="◯◯不動産のページです。">
  <meta http-equiv="X-UA-Compative" content="IE=edge">
  <meta name="robots" content="noindex, follow">
  <link rel="stylesheet" href="index1.css">
</head>
<body>
  <!--header-->
 <header class="header">
   <h1 class="header-logo">
     <a href="#">
       <img src="logo.png" alt="◯○不動産" class=logo>
     </a>
   </h1>

    <nav class="header-nav">
      <ul class="header-nav-list">
          <li class="header-nav-item"><a href="#">ホーム</a></li>
          <li class="header-nav-item"><a href="#">特徴</a></li>
          <li class="header-nav-item"><a href="#">サービス</a></li>
          <li class="header-nav-item"><a href="#">ニュース</a></li>
          <li class="header-nav-item"><a href="#">ブログ</a></li>
          <li class="header-nav-item"><a href="#">会社概要</a></li>
          <li class="header-nav-item"><a href="#">採用情報</a></li>
          <li class="header-nav-item"><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
 </header>
 <!--header end-->

 <!--top-kv-->
  <div class="top-kv">
    <div>
      <div class="u-wrap">
        <p class="top-kv-main-copy">お客様の家探しを手伝います！</p>
        <p class="top-kv-sub-copy">治安はどう？家賃は？最寄りまで何分？などのご質問を全てお答えします！</p>
        <a href="#" class="top-kv-btn m-btn m-btn-cta">ご依頼・ご相談</a>
      </div>
    </div>
  </div>
  <!--top-kv end-->

  <main>
   <!--top-feature-->
    <div class="top-feature u-ptb-m">
       <div class="u-wrap">
         <p class="top-feature-copy">私たちにお任せを！</p>
         <p class="top-feature-txt">私たちはお客様に寄り添い、家探しから引越し後もサポートいたします。<br>
          お客様に快適な家を、スムーズな引越しをご提供、ご提案させていただきます。</p>
         <a href="#" class="top-feature-btn m-btn m-btn-secondary">私たちの特徴を見る</a>
       </div>
    </div>
   <!--top-feature end-->

   <!--top-service-->
    <section class="top-service u-wrap u-ptb-m">
       <h2 class="top-service-ttl m-ttl">サービス</h2>

      <div class="top-service-list">

        <section class="top-service-item">
          <div class="top-service-itm-img">
            <img src="photo_money1.jpg" alt="お金" class=photo>
          </div>
          <h3 class="top-service-item-ttl">お金</h3>
          <p class="top-servise-item-description">ご予算に応じた物件をご紹介します。敷金・礼金・管理費など家賃以外のことも詳しくお話しさせていただきます。</p>
        </section>

        <section class="top-service-item">
          <div class="top-service-itm-img">
            <img src="photo_money2.jpg" alt="サービス２のタイトル" class=photo>
          </div>
          <h3 class="top-service-item-ttl">サービス２のタイトル</h3>
          <p class="top-servise-item-description">サービス２の説明。</p>
        </section>

        <section class="top-service-item">
           <div class="top-service-itm-img">
             <img src="photo_map1.jpg" alt="サービス３のタイトル" class=photo>
           </div>
           <h3 class="top-service-item-ttl">サービス3のタイトル</h3>
           <p class="top-servise-item-description">サービス3の説明。</p>
        </section>

        <section class="top-service-item">
          <div class="top-service-itm-img">
            <img src="photo_map2.jpg" alt="サービス４のタイトル" class=photo>
          </div>
          <h3 class="top-service-item-ttl">サービス4のタイトル</h3>
          <p class="top-servise-item-description">サービス4の説明。</p>
        </section>
      </div>
      <a href="#" class="top-service-btn m-btn m-btn-primary">サービスを見る</a>
    </section>
    <!--top-service end-->




### 発生している問題・エラーメッセージ

該当のソースコード

ソースコード@charset "UTF-8";
/* base */
/* --------------------------------- */
html{
  color: #000;
  background: #fff;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{
	font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
#yui3-css-stamp.cssreset{display:none}

*{
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	box-sizing: border-box;
}
*,*::before,*::after{
  box-sizing: border-box;
}
body{
	line-height: 1.8;
  min-width: 1140px;
}
a{
	text-decoration: none;
	color: inherit;
  transition: .3s;
}
a:hover{
  opacity: .5;
  transition: .3s;
}
.logo{
	width: 100%;
	height: 100%;
  vertical-align: bottom;
}
.photo{
  width: 200px;
  height: 185px;
  vertical-align: bottom;
}
/* mossdule */
/* --------------------------------- */
/* btn base */
.m-btn{
  display: block;
  width: 300px;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
/* btn colour primary */
.m-btn-primary{
  background-color: #1a1a1a;
  color: #fff;
}
/* btn colour secondary */
.m-btn-secondary{
  background-color: #fff;
  color: #1a1a1a;
}
/* btn colour cta */
.m-btn-cta{
  background-color: #bd2424;
  color: #fff;
}
/* title */
.m-ttl{
  font-size: 30px;
  font-weight: bold;
}
/* utility */
/* --------------------------------- */
.u-wrap{
  width: 1080px;
  margin: 0 auto;
}
.u-ptb-m{
  padding: 80px 0;
}
/* header */
/* --------------------------------- */
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  width: 100%;
  padding: 0 30px;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
  position: sticky;
  left: 0;
  top: 0;
	z-index: 1;
}
.header-logo{
  width: 80px;
  background-color: orange;
}
.header-nav-list{
  display: flex;
}
.header-nav-item{
  font-weight: bold;
  margin-right: 30px;
  outline: 1px solid black;
}
.header-nav-item:last-child{
  margin-right: 0;
}
/* kv */
/* --------------------------------- */
.top-kv{
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:url(photo_nyc1.jpg) center / cover;
}
.top-kv-main-copy{
  font-weight: bold;
  font-size:35px;
  text-align: center;
}
.top-kv-sub-copy{
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
.top-kv-btn{
  margin:40px auto 0;
}
/* feature */
/* --------------------------------- */
.top-feature{
  color: #fff;
  background-color: #1a1a1a;
}
.top-feature-copy{
  font-size: 30px;
  font-weight: bold;
}
.top-feature-txt{
  margin-top: 10px;
  line-height: 2.2;
}
.top-feature-btn{
  margin-top: 40px;
}
/* service */
/* --------------------------------- */
.top-service-ttl{
  text-align: center;
}
.top-service-list{
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.top-service-item{
  width: 49%;
  margin-right: calc(100% - (49% * 2));
  margin-top: 20px;
}
.top-service-item:nth-child(2n){
  margin-right: 0;
}
.top-service-item:nth-child(-n+2){
  margin-top: 0;
}
.top-service-item-ttl{
  font-weight: bold;
  font-size: 18px;
}
.top-service-btn{
  margin: 40px auto 0;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

タイポです。 wigth → width

html
1<img src="photo_money1.jpg" alt="お金" width="100" height="100">

補足情報に質問について

写真やロゴをサイズなど編集してからimgに入れますか？

6000x4000というような不必要に大きなサイズの画像を読み込みますと重くなりますので、適切なサイズに変更してから、img要素に設定します。ロゴやアンコンなどサイズの固定の場合は、画像サイズも画面上で表示したいサイズに編集しておきます。

写真などで画面サイズに応じて画像のサイズも変更する場合（レスポンシブ）は想定される最大サイズになるよう編集します。

投稿2021/01/25 12:59

編集2021/01/25 13:12

hatena19

総合スコア34075

imomushisan

2021/01/25 13:02

そこを直しましたが、変わりません。。。

hatena19

2021/01/25 13:06

現状が再現できるHTMLコードを質問に追記してください。 CSSがあるならCSSも追記してください。

imomushisan

2021/01/25 13:35

質問画面がすごいぐちゃぐちゃになってしまいすいません。途中までだし、background入れたりしてます。写真はimgにclassつけて対処してみようと思ってやってたところです。今模写コーディングをしていて、自分の持っている写真や言葉やかえてやってみようと思ったんで、見本とは少し違うものになってます。

imomushisan

2021/01/25 13:45

もう一つ聞きたくて、この見本の人は、ロゴと写真をまとめて img { width: 100%; height: auto; vertical-align: bottom; } としていたんですが、みんな最初から写真など貼りたいサイズに編集してからするのですか？

hatena19

2021/01/25 13:59

うまく表示されないというのは、 <img src="photo_money1.jpg" alt="お金" class=photo> の画像ですか。追加のコードを見ると、cssの方で、 .photo { width: 200px; height: 185px; vertical-align: bottom; } とサイズを設定していて、そこで指定したサイズ(200px × 185px)で表示されると思いますが、そうなりませんか。

imomushisan

2021/01/25 14:00

すみません、これは補足に説明してくれていますね。同じことを聞いてすみません。無視してください。

imomushisan

2021/01/25 14:11

photo_money1.money2.map1.map2全部画面横いっぱいに出てきます。 cssで最初はimgでlogo.photoを全部まとめて100%にして、htmlでサイズを変えようと思ってたんです。でも上手くいかないから、logo.photoそれぞれにclassをつけて、cssでimgをやめてlogoとphotoを分けました。そしたらそれは上手くサイズ変更できました。サイズ変更できたので解決はしたんですけど、綺麗なというか、ベストな書き方とかあったりしますか？初めてなもんでまとまってなかったり、ぐちゃぐちゃしてないかわからないので、もし突っ込むところがあったら教えて欲しいです。

hatena19

2021/01/25 14:24

画像の使用目的によりますけど、画像のオリジナルサイズ以外で表示したい場合はcssで指定するのでいいとおもいますよ。ただ、あまり大きな画像は読み込みに時間がかかるのでページが重くなりますのでできれば適切なサイズに編集しましょう。

imomushisan

2021/01/25 14:37

わかりました！長々とお付き合いいただき、また丁寧に教えていただきありがとうございました。

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