如何使图像移动友好？

Question

我正在为某人建立一个网站，但不知何故，我无法使标题中的图像保持在应有的位置。我正在使用@mobile 来确定屏幕宽度，但它仅适用于我的计算机屏幕。当我移动到另一台计算机时，它总是在左侧或底部。

代码：

@media (min-width: 1203px) {
  #profile {
    position: relative;
    margin-top: -35.5%;
    margin-left: -31%;
    float: left; 
    padding-left: 12%
  }
  #mishpat {
    padding-top: 150px;
  }
}
@media (max-width: 1203px) {
  #profile {
    position: relative;
    margin-top: -40.4%;
    margin-left: -35%;
    padding-left: 16%;
    padding-top: 6%; 
    float: left;
  }
  #mishpat {
    padding-top: 150px;
  }
}
@media (max-width: 1025px) {
  #profile {
    position: relative;
    margin-top: 3.5%;
    margin-left: 10%;
    padding-left: 16%;
    padding-top: 0px;
    float: left;
  }
  #mishpat {
    padding-top: 150px;
    padding-left: 0px;
  }
}
@media (max-width: 991px) {
  #profile {
    position: relative;
    margin-top: 1%;
    margin-left: 8%;
    float: left;
    bottom: 46px;
    margin-bottom: -150px;
  }
}
@media (max-width: 767px) {
  #profile {
    position: relative; 
    margin-top: 2%;
    margin-left: -15%; 
    float: left; 
    bottom: 46.5px;
  }
}
@media (max-width: 470px) {
  #profile {
    position: relative;
    margin-top: 18%;
    margin-left: -8%;
    float: left;
    max-width: 100%;
    padding-top: 25%;
  }
}

 <header class="masthead text-center text-white d-flex">
          <div class="layer">
          </div>
          <div class="container my-auto">
              <div class="row">
                  <div id="mishpat" class="col-lg-10 mx-auto">
                      <h1 class="text-uppercase">
                          <strong>ד"ר מריאנה ירון</strong>
                      </h1>
                      <hr>
                  </div>
                  <div class="col-lg-8 mx-auto">
                      <p class="text-faded mb-5">מומחית ברפואה פנימית ואנדוקרינולוגיה</p>

                  </div>
                  <div class="col-lg-10 mx-auto">
                      <img id="profile" src="C:\Users\alonbarel336\source\repos\WebSite1\yaron 2\img\portfolio\thumbnails\3.jpg" class="img-responsive" width="520" height="700">
                  </div>
              </div>
          </div>
      </header>

这里有一张图片来展示它的样子：

我怎样才能让它在它穿过蓝线之前停止（流到下一行）？

the new look after fixing with bootstrap 4

Answer 1

要使图像具有响应性，请执行以下操作：

1. 将img-responsive 替换为img-fluid。 （Bootstrap 4 中没有 img-responsive）

2. 删除width="520" height="700"。