画面幅と連動して画像を縮めたい

Question

画面幅と同じくらいの大きさのメインビジュアル画像を貼っています。
画面が縮むと連動して、画像の幅と高さの比率を保ちながら縮むようにしたいのですが、
うまく出来ませんでした。
普段は画像の下部を調整して、セクション下部にくっつけてるので、それが原因かなと思ってるのですが、
うまくいかないです。
レスポンシブで画像の大きさ80%、60%みたいな感じで調整してみたのですが、見栄えが良いものにはなりませんでした。
お手数ですがよろしくお願いします。

max-width:1000px;
height: auto;

とかで行けたのですが、今回の場合は

<section class="profile-mv">
  <div class="profile-mv-wrap">
    <div class="profile-mv-wrap-img">
      <img src="//img/neko.png">
    </div>
  </div>
</section>

.profile-mv {
  height: auto;
  background-color: skyblue;
  padding-top: 24px;
}

.profile-mv-wrap {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.profile-mv-wrap-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: -5px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

Answer 1

こんにちは。

画面幅と同じくらいの大きさのメインビジュアル画像を貼っています。
画面が縮むと連動して、画像の幅と高さの比率を保ちながら縮むようにしたい

こういうことでしょうか？

サンプル

.profile-mv-wrap-img {
  flex-basis: 100%;
}
img{
  width: 100%;
}

Comments

[takawork]

ありがとうございます！初めて
flex-basis: 100%;を知りました！