max-widthを使うと、指定した幅よりも小さく表示される

Question

スマホ用にレスポンシブしたくて、

『width： 813px;』
↓
『max-width： 813px;』
に変更しました。

すると、幅が７４５pxになってしまいました。

　中に文字を記載しているのですが、それに合わせて幅が小さくなっているようです。

padding-right:で右横の長さを出すといい感じになるのですが、今度はそれを縮小すると、横に長さを出した分、画像幅が大きくなってしまいます。

<div class="room__about">
        <div class="room__img__wrap">
          <img class="room__img" src="img/oheya01.jpg" alt="">
        </div>
        <div class="room__right">
          <h3 class="room__right__title">温泉付き客室</h3>
          <p class="room__right__p">温海の源泉かけ流し露天風呂付き客室になります。<br>あなただけの上質な安らぎのひとときを。</p>
          <p class="room__right__text">＊部屋数に限りがございます。<br>＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p>
        </div>
      </div>

.room__right {
  max-width: 813px;
  height: 381px;
  background-image: url(img/bg.png);
  position: absolute;
  top: 57px;
  left: 367px;
  z-index: -1;
}

Answer 1

max-widthで指定できるのは要素の「最大幅」なので、それより小さくなることは当然あります。
（今回はwidthが指定されていないので、最大幅を超えない限りは幅が自動で設定されてしまいますね）

具体的にどうされたいのかはっきりしないので何とも言えませんが、レスポンシブ対応をされるのであれば、「常に813pxで」表示したいというのは不可能と思われます。

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。

Answer 2

max-widthを使うと、指定した幅よりも小さく表示される

それがmax-widthの動作です。「指定した幅より広がらない」ので、指定より狭くなっても全く正常な動作です。